admin管理员组

文章数量:1327750

I was wondering if it was possible to know if the caps lock button is active while filling a web form ?

Sometimes, when you are asked to enter your password, softwares notice you that's active, and you be careful.

I would have liked to do the same in web forms.

Any ideas ?

I was wondering if it was possible to know if the caps lock button is active while filling a web form ?

Sometimes, when you are asked to enter your password, softwares notice you that's active, and you be careful.

I would have liked to do the same in web forms.

Any ideas ?

Share Improve this question edited Jun 1, 2009 at 17:53 Boris Guéry asked Jun 1, 2009 at 13:28 Boris GuéryBoris Guéry 47.6k8 gold badges56 silver badges88 bronze badges 1
  • 1 possible duplicate of How do you tell if caps lock is on using JavaScript? – sg3s Commented Aug 27, 2013 at 10:26
Add a ment  | 

4 Answers 4

Reset to default 1

The following jQuery snippet detects whether caps lock is enabled upon keypress:

$('#example').keypress(function(e) { 
    var s = String.fromCharCode( e.which );
    if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
        alert('caps is on');
    }
});

Taken from StackOverflow answer: https://stackoverflow./a/896515/1113435

try

<html>
<head>
<script type="text/javascript">
function checar_caps_lock(ev) {
    var e 

    = ev || window.event;
        codigo_tecla = e.keyCode?e.keyCode:e.which;
        tecla_shift = e.shiftKey?e.shiftKey:((codigo_tecla == 16)?true:false);
        if(((codigo_tecla >= 65 && codigo_tecla <= 90) && !tecla_shift) || ((codigo_tecla >= 97 && codigo_tecla <= 122) && tecla_shift)) {
            document.getElementById('aviso_caps_lock').style.visibility = 'visible';
        }
        else {
            document.getElementById('aviso_caps_lock').style.visibility = 'hidden';
        }
    }
    </script>
    </head>
    <body>
    <form>
    <input name="nome_do_campo" type="text" onkeypress="checar_caps_lock(event)" />
    <div id="aviso_caps_lock" style="visibility: hidden">CAPS LOCK ATIVADO</div>
    </form>

</body>
</html>

It is interesting that this only works with keypress and not with keyup and keydown. Just to know, this:

$("#example").keypress(function(e) {
    console.log("keypress: " + e.which);
});
$("#example").keydown(function(e) {
    console.log("keydown: " + e.which);
});
$("#example").keyup(function(e) {
    console.log("keyup: " + e.which);
});

("a" pressed) returns this:

keydown: 65
keypress: 97
keyup: 65 

Note: tried with chrome and firefox

Accessing user setting like that would be against any decent security model, however you could check for whether the user has entered ALL_CAPS or aLL_CAPS and warn appropriately.

An elegant work-around can be found here: http://24ways/2007/capturing-caps-lock

Sadly, there’s no way of actually detecting whether Caps Lock is on directly. However, there’s a simple work-around; if the user presses a key, and it’s a capital letter, and they don’t have the Shift key depressed, why then they must have Caps Lock on! Simple.

本文标签: javascriptIs it possible to check if the caps lock button is active while typing in formStack Overflow