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

StackOverflow https://stackoverflow.com/questions/348792

  •  20-08-2019
  •  | 
  •  

Вопрос

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

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

Это было полезно?

Решение

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

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 или '& # 196;', '& # 214;', '& # 220;', строчные буквы a-Z или 0-9 или '& # 228;', '& # 246;', '& # 252;'

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

Другие советы

В jQuery 

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

Избегайте ошибки, например, нажмите клавишу возврата, s.toLowerCase() !== s.

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

А getModifierState функция обеспечит государство:

  • Альтернативный вариант
  • Альтграф
  • CapsLock
  • Контроль
  • Фн (Android)
  • Мета
  • NumLock
  • ОС (Windows и Linux)
  • ПрокруткаLock
  • Сдвиг

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

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

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

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(), чтобы обойти это).

Многие существующие ответы будут проверять блокировку заглавных букв, когда 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)
  });

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

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

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

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

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

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

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

Недавно был похожий вопрос на hashcode.com, и я создал для этого плагин jQuery. Также поддерживается распознавание заглавных букв на цифрах. (На стандартной немецкой раскладке клавиатуры заглавные буквы влияют на цифры).

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

Для jQuery с загрузчиком Twitter

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

прописные буквы AZ или '& # 196;', '& # 214;', '& # 220;', '!', '"', '& # 167; ',' $ ','% ',' & Amp; ',' / ',' (',') ',' = ',': ','; ',' * ',' '

строчные aZ или 0-9 или '& # 228;', '& # 246;', '& # 252;', '.', ',', '+', ' # '

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

Переменная, которая показывает состояние блокировки прописных букв: 

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

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

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

Реагировать

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

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

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

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

Удачи:)

Вы можете использовать

Вот пользовательский плагин jquery, использующий пользовательский интерфейс jquery, который состоит из всех полезных идей на этой странице и использует виджет всплывающей подсказки. Сообщение 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>

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

вот мое простейшее решение (с турецкими буквами); 

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

Итак, я нашел эту страницу, и мне не очень понравились найденные мной решения, поэтому я нашел одно и предлагаю его всем вам.Для меня имеет значение только то, включен ли Caps Lock, если я набираю буквы.Этот код решил проблему для меня.Это быстро и просто, и вы получаете переменную 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.log('caps is on');
        }else{
          console.log('caps is off');
        }
        capsChecked=true;
        window.removeEventListener("keyup",capsCheck);
    }else{
      console.log("not a letter, not capsCheck was performed");
    }

}

window.addEventListener("keyup",capsCheck);

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

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

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

function isCapsLockOn(event) {
    var s = String.fromCharCode(event.which);
    if (s.toUpperCase() === s && s.toLowerCase() !== s && !event.shiftKey) {
        return true;
    }
}
Не связан с StackOverflow
scroll top