Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="input-field">
    <span id="caps-led"></span>
    <input  />
 </div>
  
</body>
</html>
 
/*
  Allows the status of the caps lock key to be determined
*/
const capsElement = document.querySelector("#caps-led");
// Add the event listener to the document.
document.addEventListener("keypress",
                          (e)=> {
  let result = isCapslock(e);
  console.log(`caps ${result}`);
  
  let className = result ? 'on' : 'off';
  
  capsElement.classList.toggle("on", result);
});
function isCapslock(e){
    const IS_MAC = /Mac/.test(navigator.platform);
    const charCode      = e.charCode;
    const shiftKey      = e.shiftKey;
    
    if (charCode >= 97 && charCode <= 122){
      capsLock = shiftKey;
    } else if (charCode >= 65 && charCode <= 90 
               && !(shiftKey && IS_MAC)){
      capsLock = !shiftKey;
    }
    return capsLock;
}
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
rajeshpillaipro
0viewers