Detect CapsLock Press on a webPage

Question

How can I detect a client-side capsLock keypress...I have tried creating the following function that I wanted to launch when a key is pressed

<script type="text/javascript" language="javascript">
function changeCapsLock(e) {
   if (typeof capsLockON != 'undefined' && e.keyCode == 20) {
      capsLockON = !capsLockON;
      displayMsg();      
   }      
} 

//Display the message if CapsLocks is ON, otherwise conceal the message    
function displayMsg() {       
   if (capsLockON)          
      document.getElementById('divCapsWarning').style.visibility = 'visible';
        else
      document.getElementById('divCapsWarning').style.visibility = 'hidden';
   }
} 

</script>
</head>

<body onkeydown="changeCapsLock(event)">

but the onkeydown event does not fire when the CapsLock is pressed?

the above code is in a MasterPage – Topher Jan 20 '14 at 20:37 — Topher, Jan 20 '14 at 20:37

score 0 · Answer 1 · answered Jan 20 '14 at 20:42

0

Calling the function from the body onkeydown tag doesn't send the event. You will need to add that to javascript for it to send it.

document.body.onkeydown = changeCapsLock;

answered Jan 20 '14 at 20:42

Cjmarkham

9,484
5
48
81

Thanks...I don't think this is a duplicate question. I want to detect the actual keypress, not the state of the capsLock when the page starts...In any event, I don't understand where to put "document.body.onkeydown = changeCapsLock;". what is handling the event? – Topher Jan 29 '14 at 21:49
I understand now. It was a dup. Thanks – Topher Jan 29 '14 at 23:34

Detect CapsLock Press on a webPage

1 Answers1