Как узнать, включен ли Caps Lock с помощью JavaScript?

Можете попробовать .. Добавил рабочий пример. Когда фокус находится на вводе, при включении Caps Lock индикатор становится красным, в противном случае - зеленым. (Не тестировалось на Mac / Linux)

ПРИМЕЧАНИЕ: у меня работают обе версии. Спасибо за конструктивный вклад в комментарии.

СТАРАЯ ВЕРСИЯ: https://jsbin.com/mahenes/edit?js,output

Также вот модифицированная версия (может кто-нибудь протестировать на Mac и подтвердить)

НОВАЯ ВЕРСИЯ: https://jsbin.com/xiconuv/edit?js,output

НОВАЯ ВЕРСИЯ:

function isCapslock(e) {
  const IS_MAC = /Mac/.test(navigator.platform);

  const charCode = e.charCode;
  const shiftKey = e.shiftKey;

  if (charCode >= 97 && charCode <= 122) {
    capsLock = shiftKey;
  } else if (charCode >= 65 && charCode <= 90
    && !(shiftKey && IS_MAC)) {
    capsLock = !shiftKey;
  }

  return capsLock;
}

СТАРАЯ ВЕРСИЯ:

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 или 'ä', 'ö', 'ü'

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

В jQuery:

$('some_element').keypress(function(e){
       if (e.keyCode == 20){
             //caps lock was pressed
       }
});

Этот плагин jQuery (код) реализует ту же идею, что и в Ответ Раджеша, немного более лаконично.

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

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')
  }
}

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

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

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

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

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

В приведенном ниже коде будет отображаться предупреждение, когда Caps Lock включен, и они нажимают клавишу с помощью Shift.

если мы вернем false; тогда текущий символ не будет добавлен на текстовую страницу.

$('#password').keypress(function(e) { 
    // e.keyCode is not work in FF, SO, it will
    // automatically get the value of e.which.  
    var s = String.fromCharCode( e.keyCode || e.which );
    if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
            alert('caps is on');
            return false;
    }
else  if ( s.toUpperCase() !== s) {
            alert('caps is on and Shiftkey pressed');
            return false;
    }
});

Я знаю, что это старая тема, но подумал, что отвечу, если она поможет другим. Кажется, что ни один из ответов на вопрос не работает в 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> 

Когда вы печатаете, если caplock включен, он может автоматически преобразовать текущий символ в нижний регистр. Таким образом, даже если Caplocks включена, он не будет вести себя так, как на текущей странице. Чтобы проинформировать своих пользователей, вы можете отобразить текст о том, что блокировка включена, но записи формы преобразованы.

попробуйте этот простой код в легком для понимания

Это сценарий

 <script language = "Javascript">
function capLock(e){
 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('divMayus').style.visibility = 'visible';
 else
   document.getElementById('divMayus').style.visibility = 'hidden';
}
</script>

И HTML

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

Недавно на hashcode.com был аналогичный вопрос, и я создал плагин jQuery для борьбы с ним. Он также поддерживает распознавание заглавных букв в числах. (На стандартной немецкой раскладке клавиатуры Caps Lock влияет на числа).

Вы можете проверить последнюю версию здесь: jquery.capsChecker

Многие существующие ответы будут проверять включение Caps Lock, когда shift не нажата, но не будут проверять его, если вы нажмете shift и получите строчные буквы, или будут проверять это, но также не будут проверять отключение Caps Lock, или будут проверять это, но будет рассматривать не-альфа-ключи как "выключенные". Вот адаптированное решение 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)
  });

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

jQuery

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

/* 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, который я не пробовал, но это хорошая идея. Если кто-то знает способ расширить сферу охвата за пределы А-За-Я, пожалуйста, отредактируйте. Кроме того, jQuery-версии этого вопроса закрыты как дубликаты, поэтому я публикую здесь оба.

Этот код обнаруживает блокировку заглавных букв независимо от случая или нажатия клавиши Shift:

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

Это решение, которое, помимо проверки состояния при записи, также переключает предупреждающее сообщение при каждом нажатии клавиши 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 Lock. Текущее состояние Caps Lock сохраняется с помощью свойства JavaScript caps в элементе пароля. Это устанавливается в первый раз, когда у нас есть проверка состояния Caps Lock, когда пользователь нажимает букву, которая может быть в верхнем или нижнем регистре. Если окно теряет фокус, мы больше не можем наблюдать переключение Caps Lock, поэтому нам нужно выполнить сброс до неизвестного состояния.

попробуйте использовать этот код.

$('selectorOnTheInputTextBox').keypress(function (e) {
        var charCode = e.target.value.charCodeAt(e.target.value.length - 1)
        var capsOn = 
            e.keyCode && 
            !e.shiftKey &&
            !e.ctrlKey &&
            charCode >= 65 && 
            charCode <= 90;

            if (capsOn) 
               //action if true
            else
               //action if false
});

Удачи :)

Я написал библиотеку под названием capsLock, которая делает именно то, что вы хотите.

Просто включите его на свои веб-страницы:

<script src = "https://rawgit.com/aaditmshah/capsLock/master/capsLock.js"></script>

Затем используйте его следующим образом:

alert(capsLock.status);

capsLock.observe(function (status) {
    alert(status);
});

См. Демонстрацию: http://jsfiddle.net/3EXMd/

Статус обновляется при нажатии клавиши Caps Lock. Он использует только взлом Shift, чтобы определить правильный статус клавиши Caps Lock. Изначально статус - false. Так что будьте осторожны.

Еще одна версия, ясная и простая, обрабатывает сдвинутый capsLock и не ограничивается ascii, я думаю:

document.onkeypress = function (e)
{
    e = e || window.event;
    if (e.charCode === 0 || e.ctrlKey || document.onkeypress.punctuation.indexOf(e.charCode) >= 0)
        return;
    var s = String.fromCharCode(e.charCode); // or e.keyCode for compatibility, but then have to handle MORE non-character keys
    var s2 = e.shiftKey ? s.toUpperCase() : s.toLowerCase();
    var capsLockOn = (s2 !== s);
    document.getElementById('capslockWarning').style.display = capsLockOn ? '' : 'none';
}
document.onkeypress.punctuation = [33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,91,92,93,94,95,96,123,124,125,126];

Редактировать: Смысл capsLockOn был отменен, ну, исправлено.

Редактировать # 2: Проверив это еще раз, я внес несколько изменений, к сожалению, более подробный код, но он обрабатывает больше действий соответствующим образом.

• Использование e.charCode вместо e.keyCode и проверка значений 0 пропускает множество несимвольных нажатий клавиш без кодирования чего-либо, специфичного для данного языка или кодировки. Насколько я понимаю, он немного менее совместим, поэтому старые, неосновные или мобильные браузеры могут вести себя не так, как ожидает этот код, но в моей ситуации оно того стоит.

• Проверка по списку известных кодов пунктуации предотвращает их рассмотрение как ложноотрицательные, поскольку на них не влияет блокировка заглавных букв. Без этого индикатор заглавных букв будет скрыт при вводе любого из этих знаков пунктуации. Если указать исключенный набор, а не включенный, он должен быть более совместим с расширенными символами. Это самый уродливый, особенный момент, и есть некоторая вероятность, что у незападных языков достаточно разных знаков препинания и / или знаков препинания, чтобы стать проблемой, но опять же, это того стоит, ИМО, по крайней мере, для моей ситуации.

Для jQuery с загрузкой twitter

Проверьте заглавные буквы для следующих символов:

прописные буквы AZ или 'Ä', 'Ö', 'Ü', '!', '"', '§', '$', '%', '&', '/', '(', ')' знак равно

строчные буквы A-Z или 0-9 или 'ä', 'ö', 'ü', '.', ',', '+', '#'

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

    var isUpperCase = ((kc >= 65 && kc <= 90) || (kc >= 33 && kc <= 34) || (kc >= 36 && kc <= 39) || (kc >= 40 && kc <= 42) || kc == 47 || (kc >= 58 && kc <= 59) || kc == 61 || kc == 63 || kc == 167 || kc == 196 || kc == 214 || kc == 220) ? true : false; // uppercase A-Z or 'Ä', 'Ö', 'Ü', '!', '"', '§', '$', '%', '&', '/', '(', ')', '=', ':', ';'
    var isLowerCase = ((kc >= 97 && kc <= 122) || (kc >= 48 && kc <= 57) || kc == 35 || (kc >= 43 && kc <= 44) || kc == 46 || kc == 228 || kc == 223 || kc == 246 || kc == 252) ? true : false; // lowercase a-Z or 0-9 or 'ä', 'ö', 'ü', '.', ','

    // 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 ((isUpperCase && !isShift) || (isLowerCase && isShift)) {
        $(this).next('.form-control-feedback').show().parent().addClass('has-warning has-feedback').next(".capsWarn").show();
    } else {
        $(this).next('.form-control-feedback').hide().parent().removeClass('has-warning has-feedback').next(".capsWarn").hide();
    }
}).after('<span class = "glyphicon glyphicon-warning-sign form-control-feedback" style = "display:none;"></span>').parent().after("<span class='capsWarn text-danger' style='display:none;'>Is your CAPSLOCK on?</span>");

живая демонстрация на jsfiddle

Вы можете использовать этот сценарий. Он должен хорошо работать в Windows, даже если нажата клавиша Shift, но в этом случае он не будет работать в Mac OS.

На основе ответа @joshuahedlund, поскольку он отлично работал у меня.

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

<html>
<head>
<script language = "javascript" type = "text/javascript" >
function checkCapsLock(e, divId) { 
    if (e){
        e = e;
    } else {
        e = window.event;
    }
    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)) {
        $(divId).style.display='block';
    } else if ((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
      (s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) { //caps is off
        $(divId).style.display='none';
   } //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)
 }
</script>
<style>    
.errorDiv {
    display: none;
    font-size: 12px;
    color: red;
    word-wrap: break-word;
    text-overflow: clip;
    max-width: 200px;
    font-weight: normal;
}
</style>
</head>
<body  onkeypress = "checkCapsLock(event, 'CapsWarn');" >
...
<input name = "password" id = "password" type = "password" autocomplete = "off">
<div id = "CapsWarn" class = "errorDiv">Capslock is ON !</div>
...
</body>
</html>

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

getModifierState функция предоставит состояние для:

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

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

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

Вот настраиваемый плагин jquery, использующий jquery ui, состоящий из всех хороших идей на этой странице и использующий виджет всплывающей подсказки. Сообщение Caps Lock автоматически применяется ко всем полям с паролями и не требует изменений в вашем текущем HTML.

Пользовательский код плагина ...

(function ($) {
    $.fn.capsLockAlert = function () {
        return this.each(function () {
            var capsLockOn = false;
            var t = $(this);
            var updateStatus = function () {
                if (capsLockOn) {
                    t.tooltip('open');
                } else {
                    t.tooltip('close');
                }
            }
            t.tooltip({
                items: "input",
                position: { my: "left top", at: "left bottom+10" },
                open: function (event, ui) {
                    ui.tooltip.css({ "min-width": "100px", "white-space": "nowrap" }).addClass('ui-state-error');
                    if (!capsLockOn) t.tooltip('close');
                },
                content: function () {
                    return $('<p style = "white-space: nowrap;"/>')
                        .append($('<span class = "ui-icon ui-icon-alert" style = "display: inline-block; margin-right: 5px; vertical-align: text-top;" />'))
                        .append('Caps Lock On');
                }
            })
            .off("mouseover mouseout")
            .keydown(function (e) {
                if (e.keyCode !== 20) return;
                capsLockOn = !capsLockOn;
                updateStatus();
            })
            .keypress(function (e) {
                var kc = e.which; //get keycode

                var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
                var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
                if (!isUp && !isLow) return; //This isn't a character effected by caps lock

                // 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)) {
                    capsLockOn = true;
                } else {
                    capsLockOn = false;
                }
                updateStatus();
            });
        });
    };
})(jQuery);

Применить ко всем элементам пароля ...

$(function () {
    $(":password").capsLockAlert();
});

Есть гораздо более простое решение для обнаружения caps-lock:

function isCapsLockOn(event) {
    var s = String.fromCharCode(event.which);
    if (s.toUpperCase() === s && s.toLowerCase() !== s && !event.shiftKey) {
        return true;
    }
}

Код Javascript

<script type = "text/javascript">
   function isCapLockOn(e){
   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('alert').style.visibility = 'visible';
   else
       document.getElementById('alert').style.visibility = 'hidden';
   }
</script>

Теперь нам нужно связать этот скрипт с помощью Html.

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

Переменная, показывающая состояние Caps Lock:

let isCapsLockOn = false;

document.addEventListener( 'keydown', function( event ) {
  var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
  if (isCapsLockOn !== caps) isCapsLockOn = caps;
});

document.addEventListener( 'keyup', function( event ) {
  var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
  if (isCapsLockOn !== caps) isCapsLockOn = caps;
});

работает во всех браузерах => могу ли я использовать

Реагировать

onKeyPress(event) { 
        let self = this;
        self.setState({
            capsLock: isCapsLockOn(self, event)
        });
    }

    onKeyUp(event) { 
        let self = this;
        let key = event.key;
        if ( key === 'Shift') {
            self.shift = false;
        }
    }

    <div>
     <input name = {this.props.name} onKeyDown = {(e)=>this.onKeyPress(e)} onKeyUp = {(e)=>this.onKeyUp(e)} onChange = {this.props.onChange}/>
                {this.capsLockAlert()}
</div>

function isCapsLockOn(component, event) {
        let key = event.key;
        let keyCode = event.keyCode;

        component.lastKeyPressed = key;

        if ( key === 'Shift') {
            component.shift = true;
        } 

        if (key === 'CapsLock') {
            let newCapsLockState = !component.state.capsLock;
            component.caps = newCapsLockState;
            return newCapsLockState;
        } else {
            if ((component.lastKeyPressed !== 'Shift' && (key === key.toUpperCase() && (keyCode >= 65 && keyCode <= 90)) && !component.shift) || component.caps ) {
                component.caps = true;
                return true;
            } else {
                component.caps = false;
                return false;
            }
        }
    }

Mottie's и Диего Виейраотклик выше - это то, что мы в конечном итоге использовали, и теперь это должен быть принятый ответ. Однако, прежде чем я это заметил, я написал эту небольшую функцию javascript, которая не полагается на коды символов ...

var capsLockIsOnKeyDown = {shiftWasDownDuringLastChar: false,
  capsLockIsOnKeyDown: function(event) {
    var eventWasShiftKeyDown = event.which === 16;
    var capsLockIsOn = false;
    var shifton = false;
    if (event.shiftKey) {
        shifton = event.shiftKey;
    } else if (event.modifiers) {
        shifton = !!(event.modifiers & 4);
    }

    if (event.target.value.length > 0 && !eventWasShiftKeyDown) {
      var lastChar = event.target.value[event.target.value.length-1];
      var isAlpha = /^[a-zA-Z]/.test(lastChar);

      if (isAlpha) {
        if (lastChar.toUpperCase() === lastChar && lastChar.toLowerCase() !== lastChar
          && !event.shiftKey && !capsLockIsOnKeyDown.shiftWasDownDuringLastChar) {
          capsLockIsOn =  true;
        }
      }
    }
    capsLockIsOnKeyDown.shiftWasDownDuringLastChar = shifton;
    return capsLockIsOn;
  }
}

Затем вызовите его в обработчике событий, например, capsLockIsOnKeyDown.capsLockIsOnKeyDown(event)

Но опять же, мы закончили тем, что использовали ответы @Mottie s и @Diego Vieira.

Этот ответ на основе jQuery, опубликованный @ user110902, был мне полезен. Однако я немного улучшил его, чтобы предотвратить ошибку, упомянутую в комментарии @B_N: он не смог обнаружить CapsLock при нажатии Shift:

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

Таким образом, он будет работать даже при нажатии Shift.

уже поздно, я знаю, но это может быть полезно кому-то другому.

Итак, вот мое самое простое решение (с турецкими символами);

function (s,e)
{
    var key = e.htmlEvent.key;

    var upperCases = 'ABCÇDEFGĞHIİJKLMNOÖPRSŞTUÜVYZXWQ';
    var lowerCases = 'abcçdefgğhıijklmnoöprsştuüvyzxwq';
    var digits = '0123456789';

    if (upperCases.includes(key))
    {
        document.getElementById('spanLetterCase').innerText = '[A]';
    }

    else if (lowerCases.includes(key))
    {
        document.getElementById('spanLetterCase').innerText = '[a]';
    }

    else if (digits.includes(key))
    {
        document.getElementById('spanLetterCase').innerText = '[1]';
    }

    else
    {
        document.getElementById('spanLetterCase').innerText = '';
    }
}

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

HTML

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

JS

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

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

Итак, я нашел эту страницу, и решения, которые я нашел, мне не очень понравились, поэтому я придумал одно и предлагаю его всем вам. Для меня это имеет значение только в том случае, если включена фиксация заглавных букв, если я печатаю буквы. Этот код решил проблему для меня. Это быстро и легко, а также дает вам переменную capsIsOn, на которую можно ссылаться всякий раз, когда она вам нужна.

let capsIsOn=false;
let capsChecked=false;

let capsCheck=(e)=>{
    let letter=e.key;
    if (letter.length===1 && letter.match(/[A-Za-z]/)){
        if (letter!==letter.toLowerCase()){
          capsIsOn=true;
          console.info('caps is on');
        }else{
          console.info('caps is off');
        }
        capsChecked=true;
        window.removeEventListener("keyup",capsCheck);
    }else{
      console.info("not a letter, not capsCheck was performed");
    }

}

window.addEventListener("keyup",capsCheck);

window.addEventListener("keyup",(e)=>{
  if (capsChecked && e.keyCode===20){
    capsIsOn=!capsIsOn;
  }
});