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


242

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

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


198
ПОТОМУ ЧТО СЛИШКОМ МНОГО ИЗ ПОЛЬЗОВАТЕЛЕЙ ЗАПОЛНЯЮТ ИХ ФОРМЫ, КАК ЭТО.
Ник

7
@nicf: Если это причина, почему бы вам не запустить регулярное выражение для ввода и не попросить их прекратить кричать, если слишком много заглавных букв?
некоторые

155
Есть гораздо лучшая причина для этого. Если пользователь вводит пароль, было бы очень полезно предупредить его, если включена его блокировка.
T Nguyen

23
Похоже, что браузеры должны реализовывать предупреждение «caps lock on», когда пользователи input type=passwordinput type=email
вводят

8
Отличный вопрос, но принятый ответ - 8 лет. Лучший ответ здесь
Mac

Ответы:


95

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

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


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

2
Я обнаружил, что использование этого с keydown (в chrome) приводит к тому, что все коды выбираются заглавными буквами. Если я использую нажатие клавиш, это работает.
Тим

2
Поиск каждой возможной комбинации символов для всех международных символов обречен на пропуск некоторых случаев. Вместо этого используйте методы toUpper / Lower case, чтобы проверить регистр.
благоговение

3
Удивление, что ответ полностью ложный - смущающий кодексы и ascii (!!!) - может получить такое большое количество голосов. Никто никогда не проверял ???
GameAlchemist

1
Обратите внимание, что согласно Mozilla , event.which был удален из веб-стандартов.
Веризм

130

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


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

4
-1 bc это ТОЛЬКО работает, если они не нажали shift, когда CAPS включен.

1
Если кто-то хочет увидеть живой пример с начальной загрузкой,
Говинда Раджбхар

Этот ответ был полезен для меня. Я улучшил условие в этом ответе из-за недостатка, упомянутого @D_N, в том, что он не работает при нажатии shift.
SebasSBM

105

Вы можете использовать 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
});

6
Я ответил на этот вопрос с дублированием / аналогичным вопросом и был обновлен другим пользователем, который теперь поддерживает Chrome. Я подтвердил это, так что теперь он работает во всех основных браузерах - и должен быть лучшим решением этого вопроса
Ян Кларк

caniuse.com/#search=getModifierState говорит, что в настоящее время он не поддерживается в Safari (пока?). Так что во всех основных браузерах это может быть еще не так.
Йенс Коой

2
Это поддерживается в Safari сейчас.
Мотти

1
И все же он обнаруживает нажатие на кнопку Capslock и не может получить общее состояние Capslock, когда пользователь вводит форму ...
SparK

Кажется, это работает, за исключением случаев, когда вы нажимаете клавишу блокировки крышки в положение выключения . Он не принимает этот ввод до следующего нажатия клавиши. Это было в Chrome для OS X. Не уверен, что это то, что распространяется через браузеры и ОС.
Ашраф Сламанг

24

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

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


Это на самом деле то, что я искал. Это работает с латинскими и кириллическими строками. Спасибо!
Младен Янетович

Это работает хорошо, но клавиши, такие как ПРОБЕЛ и цифры, выдают предупреждение. Знаете (такой же краткий / элегантный) обходной путь?

1
Также хорошо, что вы замечаете незавершенность, но она все еще неполна. Не уверен, как это исправить с помощью этого метода.

11

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

11

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

Я не уверен, почему, но этот метод не работает при первом нажатии клавиш (проверено только на Chrome).

Может ли это быть проблема скрытия пустого поля? Я не мог заставить это работать правильно, по крайней мере в Chrome. Это автоматически происходит во многих других браузерах (по крайней мере, в моей версии ниже), потому что backspace считает и удаляет mssg.

Примечание : как вы правильно использовали здесь, вам нужно использовать keypressсобытие, чтобы использовать разные оболочки при вводе, потому что оба keydownи keyupвсегда будут возвращать верхний регистр . Следовательно, это не сработает с ключом от кепки ... если вы намеревались объединиться сe.originalEvent.getModifierState('CapsLock')
KyleMit

6

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


4
Хорошее решение всегда должно включать поддержку букв за пределами английских букв AZ. Любое другое решение - оскорбление почти всех неанглийских языков.
благоговение

6

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


Superb! Просто, лаконично и безупречно в моей реализации.
Sirtastic

1
@ Райан: Спасибо за вклад! Это хороший, чистый пример кода, хотя я хотел бы отметить, что ваш ответ в основном совпадает с ответом Mottie от 2015 года, где вы оба работаетеevent.getModifierState("CapsLock").
Mac

5

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

Спасибо за исправление IE8. Включил это в мой переработанный ответ (ниже). Это твердо, хотя.

5

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


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

3

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

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


3

Для 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


3

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

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


1
Проголосовал за актуальный ответ на старый вопрос. Возможно, вы захотите добавить что-то вроде заголовка, говорящего что-то вроде: «Для современных браузеров (2017->) попробуйте это» или «Обновление для 2017»
eon

3

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


2

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

Это приводит к тому, что пробел и пробел обнаруживаются как верхний регистр в Firefox.
Адриан Рошка

2

Я написал библиотеку с названием 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. Так что будьте осторожны.


Это действительно гениальное решение. Но есть ошибка, что если Caps Lock включен, когда страница получает фокус, объект «capslock» запускается с неправильным состоянием (off).
Рик

На самом деле все начинается с неверного состояния. Однако при нажатии любой клавиши она автоматически корректирует свое состояние. Если вы можете найти способ установить его в правильное состояние, когда страница получает фокус, я был бы более чем счастлив объединить ваш код.
Аадит М Шах,

2

Еще одна версия, понятная и простая, обрабатывает сдвинутые 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, по крайней мере, для моей ситуации.


2

реагировать

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

1

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

1

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


0

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

Работает только если включена блокировка заглавных букв. Если блокировка заглавных букв выключена, она все равно сообщает, что блокировка заглавных букв включена, но с нажатой клавишей Shift (обе клавиши фактически нажаты или нет).
благоговение

Хорошо, извините за это @awe
Нага Хариш М

0

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

Это сценарий

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

0

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

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

Удачи :)


0

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


0

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

0

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

0

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

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

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

0

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


-1

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


Да, но тогда вам все равно нужно обнаружить блокировку заглавных букв. Кроме того, это означает, что вы запрещаете прописные буквы в паролях, что является неоптимальным.
Дейв Липманн

чтобы определить, включена ли блокировка заглавными буквами, вы должны проверить, отличается ли отправленная вами строчная версия символа от него, если это -> блокировка заглавных букв, то «Предупреждение: вы используете заглавную букву, но наша система преобразует в в нижнем регистре », я полагаю, javascript не предназначен для того, чтобы обнаружить блокировку заглавных букв (проверки блокировок заглавных букв требуют системного доступа), вы должны найти способ, который наилучшим образом соответствует вашим потребностям
Frederik.L

-1

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

function isCapsLockOn(event) {
    var s = String.fromCharCode(event.which);
    if (s.toUpperCase() === s && s.toLowerCase() !== s && !event.shiftKey) {
        return true;
    }
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.