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

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

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

Вы можете попробовать. Добавил рабочий пример. Когда фокус на входе, включение заглавных букв заставляет светодиод становиться красным, иначе зеленым. (Не тестировался на 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;

}

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

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

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

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

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

• Alt
• AltGraph
• CapsLock
• контроль
• Fn (Android)
• Мета
• 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
});

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

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

Мы используем, 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

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

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

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

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

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

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

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

строчные буквы aZ или 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

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

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

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

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

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

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

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

Удачи :)

Вы можете использовать этот скрипт . Он должен хорошо работать в 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> 

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

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

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

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