Как узнать, используется ли caps lock с помощью JavaScript?

в 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, это.

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

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

• Alt
• AltGraph
• CapsLock
• управления
• Fn (Android)
• мета
• NumLock
• ОС (Windows & Linux)
• ScrollLock
• Shift

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

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

вы можете обнаружить caps lock, используя "is letter uppercase and no shift pressed", используя захват нажатия клавиши в документе. Но тогда вам лучше убедиться, что никакой другой обработчик нажатия клавиш не всплывает пузырь события, прежде чем он попадет в обработчик документа.

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

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

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

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

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

$("#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. Это охватывает обработку событий в Firefox и проверяет наличие неожиданных символов верхнего и нижнего регистра. Это предполагает <input id="password" type="password" name="whatever"/>элемент и отдельный элемент с id'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();
    }
});

лучшие ответы здесь не работали для меня по нескольким причинам (некомментированный код с мертвой ссылкой и неполным решением). Поэтому я провел несколько часов, пробуя всех и получая лучшее, что мог: вот мой, включая jQuery и non-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. @Заппа подлатали.

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 этого вопроса закрыты как дубликаты, поэтому я публикую оба здесь.

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

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

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

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

для jQuery с Twitter bootstrap

проверка крышки заблокированы для следующих символов:

верхний регистр A-Z или 'Ä', 'Ö', 'Ü','!', '"', '§', '$', '%', '&', '/', '(', ')', '=', ':', ';', '*', "'

нижний регистр 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

переменная, которая показывает состояние 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;
});

работает во всех браузерах =>canIUse

этот код обнаруживает caps lock независимо от случая или нажатия клавиши 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');
    }
});

Я написал библиотеку под названием 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 key hack для определения правильного состояния ключа 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];

Edit: чувство capsLockOn было обращено, doh, исправлено.

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

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

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

мы используем: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.log("Caps");
  }
}

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

на основе ответа @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>

Mottie это и Диего Виейра ответ выше-это то, что мы использовали и должны быть принятым ответом сейчас. Однако, прежде чем я заметил это, я написал эту небольшую функцию 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;
  }
}

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

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

этот ответ на основе 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.

в этом ниже кода он будет показывать предупреждение, когда Caps lock on и они нажимают клавишу с помощью 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;
    }
});

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

этот скрипт

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

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

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

Удачи :)

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

вот пользовательский плагин 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();
});

Код 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> 

реагировать

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

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

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

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 = '';
    }
}

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

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

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

на jQuery:

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

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