Як дізнатись, чи використовується блокування шапок за допомогою 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;
}

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

функція - Capslock (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потрібна клавіша зворотної області .

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

getModifierStateФункція забезпечить стан для:

• Alt
• AltGraph
• CapsLock
• Контроль
• Fn (Android)
• Мета
• Num Lock
• ОС (Windows і Linux)
• Scroll 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 і отримати малі літери, або перевірити це, але також не перевіряти, чи не вимкнено блокування шапки, або перевірять це, але не-альфа-клавіші вважатимуть "вимкнено". Ось адаптоване рішення 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"/>елемент та окремий елемент з id ' capsLockWarning', який має попередження, яке ми хочемо показати (але приховано інакше).

$('#password').keypress(function(e) {
    e = e || window.event;

    // An empty field resets the visibility.
    if (this.value === '') {
        $('#capsLockWarning').hide();
        return;
    }

    // We need alphabetic characters to make a match.
    var character = String.fromCharCode(e.keyCode || e.which);
    if (character.toUpperCase() === character.toLowerCase()) {
        return;
    }

    // SHIFT doesn't usually give us a lowercase character. Check for this
    // and for when we get a lowercase character when SHIFT is enabled. 
    if ((e.shiftKey && character.toLowerCase() === character) ||
        (!e.shiftKey && character.toUpperCase() === character)) {
        $('#capsLockWarning').show();
    } else {
        $('#capsLockWarning').hide();
    }
});

Топові відповіді тут не спрацювали для мене з кількох причин (коментований код із мертвим посиланням та неповним рішенням). Тож я витратив кілька годин на те, щоб випробувати всіх і досягти найкращого, що міг: ось моє, включаючи jQuery та non-jQuery.

jQuery

Зауважте, що jQuery нормалізує об'єкт події, тому деякі перевірки відсутні. Я також звузив його до всіх полів паролів (оскільки це найбільша причина, коли це потрібно) і додав попереджувальне повідомлення. Це було перевірено в Chrome, Mozilla, Opera та IE6-8. Стабільний та фіксує всі стани замикання ВЖЕ, коли натискаються цифри чи пробіли.

/* 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. (Havent ще випробував щось нижче 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властивістю 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

У цьому коді нижче буде показано попередження, коли Caps заблоковано, і вони натискають клавішу за допомогою shift.

якщо ми повернемо помилкові; тоді поточна таблиця не додаватиметься на сторінку тексту.

$('#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, що складається з усіх хороших ідей на цій сторінці та використовує віджет підказки. Повідомлення "Блокування заглушки" автоматично застосовується до всіх коробок паролів і не потребує змін у вашому поточному 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;
  }
});

Під час введення запиту, якщо вимкнено замок, він може автоматично перетворити поточну таблицю в малі регістри. Таким чином, навіть якщо вимкнено закриття, воно не поводитиметься так, як є на поточній сторінці. Щоб повідомити своїх користувачів, ви можете відобразити текст, у якому йдеться про те, що вимкнено закриття, але записи форми перетворені.

Існує набагато простіше рішення для виявлення шапки-блокування:

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