使用jQuery检测大写锁定开启/关闭

1

我要做的就是提出了一个警告，当

用户名或密码不正确，
用户名或密码提供的是所有的大写。

这是一个非常糟糕的主意，只允许较小的字母。通过这样做，你可以大量减少可能的密码数量。

2010-02-22 05:02:37 Pointy

28

How to detect Caps Lock with 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 
}

然后输入密码形式：

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

来源

2010-02-22 05:02:49 twodayslate

+0

@twodayslate +1太有价值的答案了......但我一直在寻找jquery – 2010-02-22 05:05:42

+13

+1，但为什么要做'kc'和'sk'全局变量？你应该使用'var'在函数中声明它们。另外'（kc == 16）'已经是一个bool表达式，你不需要把它包装在'（（kc == 16）？true：false）' – Keith 2012-11-05 11:28:38

+0

+1非常好，对我感谢.. 。:) – abhi 2013-01-09 06:23:05

-7

用户创建自己的密码后，当他们登录时输入它，你可以只将其转换为小写字母服务器在检查它是否正确之前。

以这种方式节省了用户的工作量。

来源

2010-04-30 16:05:51

+3

我不认为你应该改变用户提交的密码 - 一个强密码将包含大小写字母组合 – 2013-10-11 12:45:51

5

但你忘了一些东西。如果您按下大写锁定键并转换并键入，则不会出现“大写字母打开”消息。

这里是一个修正版本：

<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>

来源

2011-11-30 07:56:59 TheTimmaeh

3

我发现了一个更好的办法来做到这一点使用jQuery：这样，当用户按下大写锁，用户并不需要你可以检测键入一个字母来检查：（用户需要键入至少1个键开始检测的CapsLock）演示：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>

来源

2012-04-18 15:29:56

12

有一个jQuery plugin called capslockstate，它将监控整个页面上大写字母锁定键的状态，而不只是在特定字段中。

您可以查询大小写锁定键的状态，也可以定义事件侦听器对状态更改作出反应。

这个插件的检测和状态管理比这里的其他建议做得更好，包括使用非英语键盘，监控Caps Lock键本身的使用，以及如果输入非字母字符时不会忘记状态。

有两个演示，one showing basic event binding和另一个showing the warning only when the password field has focus。

例如

$(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); 

});

和

$(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(); 

});

The code for the plugin是在GitHub上查看。

来源

2013-01-07 23:10:35 nosilleg

+0

这是最完整和可扩展的答案 – BallisticPugh 2013-07-14 22:26:27

使用jQuery检测大写锁定开启/关闭

回答

相关问题