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



15 Answers

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

javascript keyboard capslock

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

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




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

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. Это охватывает обработку событий в 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();
    }
});



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



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

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




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

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




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

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

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




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



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




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

Это сценарий

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



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




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



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




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

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





Related