keyboard получить - Как вы скажете, работает ли кепка с использованием JavaScript?





страницы носить (26)


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

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

Как вы скажете, работает ли кепка с использованием JavaScript?

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




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

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




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

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




В 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 , необходим s.toLowerCase() !== s .




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



реагировать

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



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



Этот код обнаруживает блокировку замков независимо от случая или при нажатии клавиши сдвига:

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



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

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




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




Я написал библиотеку под названием 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. Для определения правильного состояния клавиши Caps Lock используется только клавиша Shift key. Первоначально статус false . Так что будьте осторожны.




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

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

function (s,e)
{
    var key = e.htmlEvent.key;

    var upperCases = 'ABCÇDEFGĞHIİJKLMNOÖPRSŞTUÜVYZXWQ';
    var lowerCases = 'abcçdefgğhıijklmnoöprsştuüvyzxwq';
    var digits = '0123456789';

    if (upperCases.includes(key))
    {
        document.getElementById('spanLetterCase').innerText = '[A]';
    }

    else if (lowerCases.includes(key))
    {
        document.getElementById('spanLetterCase').innerText = '[a]';
    }

    else if (digits.includes(key))
    {
        document.getElementById('spanLetterCase').innerText = '[1]';
    }

    else
    {
        document.getElementById('spanLetterCase').innerText = '';
    }
}



попробуйте этот простой код в удобном для понимания

Это сценарий

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



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




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



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

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

Удачи :)




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




Этот 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.




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



Многие существующие ответы будут проверять блокировку блокировки, когда сдвиг не будет нажат, но не будет проверять его, если вы нажмете 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, используя jquery ui, составленный из всех хороших идей на этой странице и использующий виджет всплывающей подсказки. Сообщение о блокировке паролей автоматически применяет все поля пароля и не требует изменений в вашем текущем 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();
});



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




Мы используем getModifierState для проверки блокировки caps, это только член мыши или клавиатуры, поэтому мы не можем использовать 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




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



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

Функция getModifierState предоставит состояние для:

  • Alt
  • AltGraph
  • CapsLock
  • контроль
  • Fn (Android)
  • Мета
  • NumLock
  • ОС (Windows и Linux)
  • ScrollLock
  • сдвиг

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

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



Некоторые люди, которые были в комитете ECMAScript, хорошо говорят: « Изменения в JavaScript, часть 1: ECMAScript 5» о том, как постепенное использование "use strict"коммутатора позволяет разработчикам JavaScript очищать множество опасных функций JavaScript без внезапного нарушения каждого веб-сайта в мире.

Конечно, в нем также говорится о том, что такое много ошибок (и), и как ECMAScript 5 их исправляет.





javascript keyboard capslock