Включение/выключение блокировки колпачков с помощью jQuery

Как я могу обнаружить ключ Caps Lock вкл/выкл с помощью jQuery? У меня есть пароль textbox, и я допускаю только строчные буквы, поэтому я не хочу, чтобы кнопка Caps Lock была включена.

Можно ли определить состояние клавиши Caps Lock с помощью jQuery?

6 ответов

Как обнаружить Caps Lock с помощью 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
}

Затем для вашей формы пароля:

<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>


Существует плагин jQuery, называемый caplockstate, который будет контролировать состояние ключа блокировки кол-ва на всей странице, а не только в определенных полях.

Вы можете запросить состояние ключа блокировки колпачков или определить, что прослушиватели событий реагируют на изменения состояния.

Плагин делает лучшую работу по обнаружению и управлению состоянием, чем другие предложения здесь, в том числе работу с неанглийскими клавиатурами, контроль за использованием самого ключа Caps Lock и не забывание состояния, если введены не-альфа-символы.

Есть два демо, один, показывающий привязку основного события, а другой показывает предупреждение только тогда, когда поле пароля имеет фокус.

например.

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

Код для плагина доступен для просмотра на GitHub.


Но ты что-то забыл. Если вы нажмете клавишу "capslock" и "shift and type", не появится сообщение "caps on".

Вот исправленная версия:

<label style="float:left;display:block;width:80px;">Login:</label>
 <label style="float:left;display:block;width:80px;">Password:</label>


Я нашел лучший способ сделать это с помощью jquery: таким образом вы можете обнаружить, когда пользователь нажимает клавишу "каплок", пользователю не нужно вводить письмо для проверки: (пользователю нужно ввести не менее 1 ключа для запуска обнаружение капсулы) demo: http://arthurfragoso.onphp.net/codes/capslock.html

<title>Checking Caps Lock using Jquery - Javascript</title>

<form action="/codes/capslock.html" id="formid"> 
 <div>
 User:
 </div>
 <div>
 
 </div>
 <div>
 Password:
 </div>
 <div>
 
 </div>
 <div id="capslockdiv" style="display: none; color: red;">
 Caps Lock On
 </div>
 <div>
 
 </div>
</form>


Что я делаю, выдается предупреждение, когда

  • неверно имя пользователя или пароль и
  • имя пользователя или пароль были в верхнем регистре.

Это довольно плохая идея, чтобы разрешить только небольшие буквы. Вы сокращаете количество возможных паролей огромным количеством, делая это.


После того, как пользователь создал свой пароль, когда он вводит его во время входа в систему, вы можете просто преобразовать его в нижний регистр на сервере, прежде чем проверять его правильность.

Сохраняет усилия для пользователя таким образом.

licensed under cc by-sa 3.0 with attribution.