web-dev-qa-db-fra.com

Détecter les capuchons verrouillage / éteindre en utilisant jQuery

Comment puis-je détecter la clé de verrouillage des capuchons sur/off en utilisant jQuery? J'ai un mot de passe textbox, et je n'autoris que des lettres minuscules, donc je ne veux pas que la clé de verrouillage des capsules soit activée.

Est-il possible de détecter l'état de la clé de verrouillage des capuchons en utilisant jQuery?

jquerypasswordscapslock
22
ACP

Comment détecter les capuchons avec JavaScript.

function capLock(e){
  var kc = e.keyCode ? e.keyCode : e.which;
  var sk = e.shiftKey ? e.shiftKey : kc === 16;
  var visibility = ((kc >= 65 && kc <= 90) && !sk) || 
      ((kc >= 97 && kc <= 122) && sk) ? 'visible' : 'hidden';
  document.getElementById('divMayus').style.visibility = visibility
}

Ensuite, pour votre mot de passe:

<input type="password" name="txtPassword" onkeypress="capLock(event)" />
<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>
30
twodayslate

Il y a un Plugin JQuery appelé capslockstate qui surveillera l'état de la clé de verrouillage des capuchons sur toute la page, pas seulement dans des champs spécifiques.

Vous pouvez soit interroger l'état de la clé de verrouillage des capuchons ou définir les auditeurs d'événements à réagir aux modifications de l'état.

Le plugin fait un meilleur travail de détection et de gestion de l'état que les autres suggestions ici, y compris de travailler avec des claviers non anglais, surveillant l'utilisation de la clé de verrouillage des capuchons lui-même et sans oublier l'état si des caractères non alpha sont dactylographiés.

Il y a deux démos, ne liaison d'événement de base et une autre indiquant l'avertissement uniquement lorsque le champ Mot de passe a la mise au point .

par exemple.

$(document).ready(function() {

    /* 
    * Bind to capslockstate events and update display based on state 
    */
    $(window).bind("capsOn", function(event) {
        $("#statetext").html("on");
    });
    $(window).bind("capsOff", function(event) {
        $("#statetext").html("off");
    });
    $(window).bind("capsUnknown", function(event) {
        $("#statetext").html("unknown");
    });

    /*
    * Additional event notifying there has been a change, but not the state
    */
    $(window).bind("capsChanged", function(event) {
        $("#changetext").html("changed").show().fadeOut();
    });

    /* 
    * Initialize the capslockstate plugin.
    * Monitoring is happening at the window level.
    */
    $(window).capslockstate();

    // Call the "state" method to retreive the state at page load
    var initialState = $(window).capslockstate("state");
    $("#statetext").html(initialState);

});

et

$(document).ready(function() {

    /* 
    * Bind to capslockstate events and update display based on state 
    */
    $(window).bind("capsOn", function(event) {
        if ($("#Passwd:focus").length > 0) {
            $("#capsWarning").show();
        }
    });
    $(window).bind("capsOff capsUnknown", function(event) {
        $("#capsWarning").hide();
    });
    $("#Passwd").bind("focusout", function(event) {
        $("#capsWarning").hide();
    });
    $("#Passwd").bind("focusin", function(event) {
        if ($(window).capslockstate("state") === true) {
            $("#capsWarning").show();
        }
    });

    /* 
    * Initialize the capslockstate plugin.
    * Monitoring is happening at the window level.
    */
    $(window).capslockstate();

});

le code pour le plugin est visible sur GitHub.

14
nosilleg

Mais tu as oublié quelque chose. Si vous appuyez sur CAPSLOCK et sur Shift and Tapez, le message ne sera pas sur le message 'Caps.

Voici une version corrigée:

<html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script language="Javascript">
        $(document).ready(function(){
            $('input').keypress(function(e) { 
                var s = String.fromCharCode( e.which );

                if((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey) ||
                   (s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)){
                    if($('#capsalert').length < 1) $(this).after('<b id="capsalert">CapsLock is on!</b>');
                } else {
                    if($('#capsalert').length > 0 ) $('#capsalert').remove();
                }
            });
        });
    </script>
</head>
<body>
    <label style="float:left;display:block;width:80px;">Login:</label><input type="text" /><br />
    <label style="float:left;display:block;width:80px;">Password:</label><input type="password" /><br />
</body>
6
TheTimmaeh

J'ai trouvé une meilleure façon de faire cela à l'aide de JQuery: Vous pouvez ainsi détecter lorsque l'utilisateur appuyez sur capsLock, l'utilisateur n'a pas besoin de taper une lettre pour vérifier: (l'utilisateur doit taper au moins 1 touche pour commencer à détecter la détection du capslock. ) Démo: http://arthurfragoso.onphp.net/codes/capslock.html

<html><head><title>Checking Caps Lock using Jquery - Javascript</title></head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<form action="/codes/capslock.html" id="formid"> 

            <div>
                User:
            </div>
            <div>
                <input type="text" id="user" />
            </div>

            <div>
                Password:
            </div>
            <div>
                <input type="password" id="password" />
            </div>

            <div id="capslockdiv" style="display: none; color: red;">
                Caps Lock On
            </div>

        <div>
                <input type="submit" />
            </div>
</form>
<script>
 $(document).ready(
    function () {
        check_capslock_form($('#formid')); //applies the capslock check to all input tags
    }
 );

document.onkeydown = function (e) { //check if capslock key was pressed in the whole window
    e = e || event;
    if (typeof (window.lastpress) === 'undefined') { window.lastpress = e.timeStamp; }
    if (typeof (window.capsLockEnabled) !== 'undefined') {
        if (e.keyCode == 20 && e.timeStamp > window.lastpress + 50) {
            window.capsLockEnabled = !window.capsLockEnabled;
            $('#capslockdiv').toggle();
        }
        window.lastpress = e.timeStamp;
        //sometimes this function is called twice when pressing capslock once, so I use the timeStamp to fix the problem
    }

};

function check_capslock(e) { //check what key was pressed in the form
    var s = String.fromCharCode(e.keyCode);
    if (s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey) {
        window.capsLockEnabled = true;
        $('#capslockdiv').show();
    }
    else {
        window.capsLockEnabled = false;
        $('#capslockdiv').hide();
    }
}

function check_capslock_form(where) {
    if (!where) { where = $(document); }
    where.find('input,select').each(function () {
        if (this.type != "hidden") {
            $(this).keypress(check_capslock);
        }
    });
}
</script>

</body>
</html>
3
Arthur F

Ce que je fais est mis en place un avertissement lorsque

  1. le nom d'utilisateur ou le mot de passe est incorrect et
  2. le nom d'utilisateur ou le mot de passe fourni était tout en majuscule.

C'est une bonne idée de permettre uniquement des lettres plus petites. Vous réduisez le nombre de mots de passe possibles par un montant considérable en le faisant.

1
Pointy