Как узнать, включена ли блокировка заглавных букв при использовании JavaScript?

Question

Как узнать, включена ли блокировка заглавных букв при использовании JavaScript?

Одно предостережение: я сделал это в Google, и лучшее решение, которое я смог найти, - это прикрепить событие onkeypress к каждому вводу, а затем проверять каждый раз, была ли нажатая буква заглавной, и если это так, то проверять, сдвиг также был удержан. Если это не так, значит, заглушка должна быть включена. Это кажется действительно грязным и просто ... расточительным - конечно, есть лучший способ, чем этот?

Answer 1

В jQuery,

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

Избегайте ошибки, как клавиша Backspace, необходим s.toLowerCase() !== s.

Answer 2

нашел это интересным .... Вы можете попробовать ...

function isCapslock(e){

    e = (e) ? e : window.event;

    var charCode = false;
    if (e.which) {
        charCode = e.which;
    } else if (e.keyCode) {
        charCode = e.keyCode;
    }

    var shifton = false;
    if (e.shiftKey) {
        shifton = e.shiftKey;
    } else if (e.modifiers) {
        shifton = !!(e.modifiers & 4);
    }

    if (charCode >= 97 && charCode <= 122 && shifton) {
        return true;
    }

    if (charCode >= 65 && charCode <= 90 && !shifton) {
        return true;
    }

    return false;

}

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

прописные буквы A-Z или 'Ä', 'Ö', 'Ü', строчные буквы a-Z или 0-9 или 'ä', 'ö', 'ü'

Приведенные выше ключи являются просто примерами представления.

Answer 3

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

Функция getModifierState обеспечит состояние для:

• Alt
• AltGraph
• CapsLock
• Контроль
• Fn (Android)
• Meta
• NumLock
• ОС (Windows & Linux)
• ScrollLock
• Сдвиг

Эта демонстрация работает во всех основных браузерах, включая мобильные ( caniuse ).

passwordField.addEventListener( 'keydown', function( event ) {
  var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
  console.log( caps ); // true when you press the keyboard CapsLock key
});

Answer 4

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

document.onkeypress = function ( e ) {
  e = e || window.event;
  var s = String.fromCharCode( e.keyCode || e.which );
  if ( (s.toUpperCase() === s) !== e.shiftKey ) {
    // alert('caps is on')
  }
}

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

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

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

Answer 5

Многие существующие ответы будут проверять блокировку заглавных букв, когда shift не нажата, но не будут проверять ее, если вы нажмете Shift и наберете нижний регистр, или проверите это, но также не проверит, отключена ли блокировка заглавных букв, или проверит для этого, но будет рассматривать не-альфа ключи как «выключено». Вот адаптированное решение jQuery, которое будет отображать предупреждение, если нажата буквенная клавиша с заглавными буквами (сдвиг или нет сдвига), отключит предупреждение, если нажата буквенная клавиша без заглавных букв, но не выключит или не включит предупреждение, когда нажаты цифры или другие клавиши.

$("#password").keypress(function(e) { 
    var s = String.fromCharCode( e.which );
    if ((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey)|| //caps is on
      (s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) {
        $("#CapsWarn").show();
    } else if ((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
      (s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) { //caps is off
        $("#CapsWarn").hide();
    } //else upper and lower are both same (i.e. not alpha key - so do not hide message if already on but do not turn on if alpha keys not hit yet)
  });

Answer 6

в JQuery. Это охватывает обработку событий в Firefox и проверяет наличие неожиданных прописных и строчных букв. Это предполагает элемент <input id="password" type="password" name="whatever"/> и отдельный элемент с идентификатором 'capsLockWarning', который имеет предупреждение, которое мы хотим показать (но скрыто в противном случае).

$('#password').keypress(function(e) {
    e = e || window.event;

    // An empty field resets the visibility.
    if (this.value === '') {
        $('#capsLockWarning').hide();
        return;
    }

    // We need alphabetic characters to make a match.
    var character = String.fromCharCode(e.keyCode || e.which);
    if (character.toUpperCase() === character.toLowerCase()) {
        return;
    }

    // SHIFT doesn't usually give us a lowercase character. Check for this
    // and for when we get a lowercase character when SHIFT is enabled. 
    if ((e.shiftKey && character.toLowerCase() === character) ||
        (!e.shiftKey && character.toUpperCase() === character)) {
        $('#capsLockWarning').show();
    } else {
        $('#capsLockWarning').hide();
    }
});

Answer 7

Лучшие ответы здесь не сработали для меня по нескольким причинам (незакомментированный код с неработающей ссылкой и неполное решение). Поэтому я потратил несколько часов на то, чтобы всех попробовать и получить лучшее, что мог: вот мой, включая jQuery и non-jQuery.

JQuery

Обратите внимание, что jQuery нормализует объект события, поэтому некоторые проверки отсутствуют. Я также сузил его до всех полей пароля (так как это самая большая причина для этого) и добавил предупреждающее сообщение. Это было проверено в Chrome, Mozilla, Opera и IE6-8. Стабильно и перехватывает все состояния колпачка, КРОМЕ, когда нажаты цифры или пробелы.

/* check for CAPS LOCK on all password fields */
$("input[type='password']").keypress(function(e) {

    var $warn = $(this).next(".capsWarn"); // handle the warning mssg
    var kc = e.which; //get keycode
    var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
    var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
    // event.shiftKey does not seem to be normalized by jQuery(?) for IE8-
    var isShift = ( e.shiftKey ) ? e.shiftKey : ( (kc == 16) ? true : false ); // shift is pressed

    // uppercase w/out shift or lowercase with shift == caps lock
    if ( (isUp && !isShift) || (isLow && isShift) ) {
        $warn.show();
    } else {
        $warn.hide();
    }

}).after("<span class='capsWarn error' style='display:none;'>Is your CAPSLOCK on?</span>");

без jQuery

В некоторых других решениях без jQuery отсутствовали резервы IE. @Zappa исправил это.

document.onkeypress = function ( e ) {
    e = (e) ? e : window.event;

    var kc = ( e.keyCode ) ? e.keyCode : e.which; // get keycode
    var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
    var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
    var isShift = ( e.shiftKey ) ? e.shiftKey : ( (kc == 16) ? true : false ); // shift is pressed -- works for IE8-

    // uppercase w/out shift or lowercase with shift == caps lock
    if ( (isUp && !isShift) || (isLow && isShift) ) {
        alert("CAPSLOCK is on."); // do your thing here
    } else {
        // no CAPSLOCK to speak of
    }

}

---

Примечание. Ознакомьтесь с решениями @Borgar, @Joe Liversedge и @Zappa, а также с плагином, разработанным @Pavel Azanov, который я не пробовал, но это хорошая идея. Если кто-то знает способ расширить область действия за пределы A-Za-z, отредактируйте его. Кроме того, jQuery-версии этого вопроса закрыты как дубликаты, поэтому я публикую оба здесь.

Answer 8

Это решение, которое, помимо проверки состояния при записи, также переключает предупреждающее сообщение при каждом нажатии клавиши Caps Lock (с некоторыми ограничениями).

Он также поддерживает неанглийские буквы вне диапазона A-Z, так как проверяет строковый символ по toUpperCase() и toLowerCase() вместо проверки по символьному диапазону.

$(function(){
  //Initialize to hide caps-lock-warning
  $('.caps-lock-warning').hide();

  //Sniff for Caps-Lock state
  $("#password").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)) {
      this.caps = true; // Enables to do something on Caps-Lock keypress
      $(this).next('.caps-lock-warning').show();
    } else if((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
              (s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) {
      this.caps = false; // Enables to do something on Caps-Lock keypress
      $(this).next('.caps-lock-warning').hide();
    }//else else do nothing if not a letter we can use to differentiate
  });

  //Toggle warning message on Caps-Lock toggle (with some limitation)
  $(document).keydown(function(e){
    if(e.which==20){ // Caps-Lock keypress
      var pass = document.getElementById("password");
      if(typeof(pass.caps) === 'boolean'){
        //State has been set to a known value by keypress
        pass.caps = !pass.caps;
        $(pass).next('.caps-lock-warning').toggle(pass.caps);
      }
    }
  });

  //Disable on window lost focus (because we loose track of state)
  $(window).blur(function(e){
    // If window is inactive, we have no control on the caps lock toggling
    // so better to re-set state
    var pass = document.getElementById("password");
    if(typeof(pass.caps) === 'boolean'){
      pass.caps = null;
      $(pass).next('.caps-lock-warning').hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="password" id="password" />
<span class="caps-lock-warning" title="Caps lock is on!">CAPS</span>

Обратите внимание, что наблюдение за переключением блокировки заглавных букв полезно, только если мы знаем состояние блокировки заглавных букв до нажатия клавиши Caps Lock . Текущее состояние caps lock поддерживается с помощью свойства caps JavaScript в элементе пароля. Это устанавливается в первый раз, когда мы проверяем состояние заглавных букв, когда пользователь нажимает букву, которая может быть в верхнем или нижнем регистре. Если окно теряет фокус, мы больше не можем наблюдать переключение блокировки шапки, поэтому нам нужно сбросить в неизвестное состояние.

Answer 9

Я знаю, что это старая тема, но я подумаю, что если это поможет другим. Похоже, что ни один из ответов на вопрос не работает в IE8. Однако я нашел этот код, который работает в IE8. (Пока что не проверял ничего ниже IE8). Это может быть легко изменено для jQuery, если требуется.

function capsCheck(e,obj){ 
    kc = e.keyCode?e.keyCode:e.which;  
    sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);  
    if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk)){
        document.getElementById('#'+obj.id).style.visibility = 'visible';
    } 
    else document.getElementById('#'+obj.id).style.visibility = 'hidden';
}

И функция вызывается через событие onkeypress следующим образом:

<input type="password" name="txtPassword" onkeypress="capsCheck(event,this);" />
<div id="capsWarningDiv" style="visibility:hidden">Caps Lock is on.</div> 

Answer 10

Мы используем getModifierState для проверки блокировки прописных букв, это только элемент события мыши или клавиатуры, поэтому мы не можем использовать onfocus. Наиболее распространенные два способа получения поля пароля - щелчок мышью или вкладка. Мы используем onclick, чтобы проверить наличие щелчка мыши внутри ввода, и мы используем onkeyup, чтобы обнаружить вкладку из предыдущего поля ввода. Если поле пароля является единственным полем на странице и имеет автофокус, то событие не произойдет, пока не будет выпущен первый ключ, что нормально, но не идеально, вы действительно хотите, чтобы подсказки с заглавными буквами отображались после того, как поле пароля набирает силу фокус, но в большинстве случаев это решение работает как шарм.

HTML

<input type="password" id="password" onclick="checkCapsLock(event)" onkeyup="checkCapsLock(event)" />

JS

function checkCapsLock(e) {
  if (e.getModifierState("CapsLock")) {
    console.log("Caps");
  }
}

https://codepen.io/anon/pen/KxJwjq