Как вы узнаете, работает ли кепка с использованием JavaScript?
Одно предупреждение: я сделал google, и лучшим решением, которое я смог найти, было прикрепить событие onkeypress к каждому входу, а затем проверить каждый раз, если письмо было нажато в верхнем регистре, и если бы это было так, проверьте, сдвиг также был сдержан. Если это не так, значит, закрыт замок. Это чувствует себя действительно грязным и просто... расточительным - наверняка там лучший способ, чем это?
Нашел это интересно.... Вы можете попробовать.
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;
}
Для международных символов дополнительная дополнительная проверка может быть добавлена для следующих ключей по мере необходимости. Вы должны получить диапазон ключей для интересующих вас символов, может быть, с помощью массива клавиатуры, который будет содержать все допустимые ключи квитанции, которые вы адресуете...
в верхнем регистре A-Z или 'Ä', 'Ö', 'Ü', нижний регистр a-Z или 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');
}
});
Избегайте ошибки, например, клавиши backspace, s.toLowerCase() !== s.
Вы можете использовать KeyboardEvent чтобы обнаружить многочисленные ключи, включая блокировку заглавных букв в самых последних браузерах.
Функция getModifierState предоставит состояние для:
Эта демонстрация работает во всех основных браузерах, включая мобильные (caniuse).
passwordField.addEventListener( 'keydown', function( event ) {
var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
console.log( caps ); // true when you press the keyboard CapsLock key
});
Вы можете обнаружить блокировку заглавными буквами, используя "верхний регистр букв и без сдвига", используя захват нажатием клавиши на документе. Но тогда вам лучше быть уверенным, что никакой другой обработчик нажатия клавиш не выдвинет всплывающее окно события до того, как оно попадет в обработчик документа.
document.onkeypress = function ( e ) {
e = e || window.event;
var s = String.fromCharCode( e.keyCode || e.which );
if ( (s.toUpperCase() === s) !== e.shiftKey ) {
// alert('caps is on')
}
}
Вы можете захватить событие на этапе захвата в браузерах, которые его поддерживают, но это кажется несколько бессмысленным, поскольку оно не будет работать во всех браузерах.
Я не могу придумать какой-либо другой способ фактического определения статуса блокировки шапки. В любом случае проверка проста, и если были напечатаны не обнаруживаемые символы, ну... тогда обнаружение не было необходимости.
В прошлом году была статья о 24 путях. Неплохо, но не хватает поддержки международных символов (используйте toUpperCase() чтобы обойти это).
В 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();
}
});
Многие существующие ответы будут проверять блокировку блокировки, когда сдвиг не будет нажат, но не будет проверять его, если вы нажмете 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.
Обратите внимание, что 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 не было резервов 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 этого вопроса закрыты как дубликаты, поэтому я отправляю их здесь.
Я знаю, что это старая тема, но я думал, что вернусь, если это поможет другим. Ни один из ответов на вопрос, похоже, не работает в 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 (с некоторыми ограничениями).
Он также поддерживает не-английские буквы вне диапазона A-Z, так как он проверяет строковый символ на 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> Мы используем 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");
}
}
Недавно на hashcode.com появился похожий вопрос, и я создал плагин jQuery, чтобы справиться с ним. Он также поддерживает распознавание блокировки на номера. (На стандартной немецкой клавиатуре блокировка блокировки влияет на цифры).
Вы можете проверить последнюю версию здесь: jquery.capsChecker
Для jQuery с бутстрапом twitter
Заблокировать блокировку для следующих символов:
верхний регистр AZ или 'Ä', '...', 'Ü', '!', '' ',' § ',' $','% ',' & ','/',' (', ')', '=', ':', ';', '*', '' '
нижний регистр a-Z или 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>");
Переменная, которая показывает состояние блокировки шапки:
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, которая делает именно то, что вы хотите.
Просто включите его на свои веб-страницы:
<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. Поэтому будьте осторожны.
Еще одна версия, понятная и простая, обрабатывает сдвинутые 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 было отменено, doh, исправлено.
Редактировать # 2:. После проверки этого еще несколько изменений, немного более подробный код, к сожалению, но он обрабатывает больше действий соответствующим образом.
Использование e.charCode вместо e.keyCode и проверка значений 0 пропускает множество несимвольных нажатий, без кодирования чего-либо конкретного для данного языка или кодировки. По моему мнению, это немного менее совместимо, поэтому старые, не-мейнстримные или мобильные браузеры могут не вести себя так, как этого ожидает код, но он того стоит, для моей ситуации.
Проверка на список известных кодов пунктуации не позволяет им считаться ложными негативами, так как на них не влияет блокировка кавычек. Без этого индикатор блокировки колпачков скрывается при вводе любого из этих символов пунктуации. Указав исключенный набор, а не включенный, он должен быть более совместим с расширенными символами. Это самый уродливый, особый случайный бит, и есть вероятность того, что незападные языки имеют достаточно разные знаки препинания и/или пунктуации, чтобы быть проблемой, но опять же это стоит ИМО, по крайней мере для моей ситуации.
Реагировать
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;
}
}
}
Этот ответ на основе 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.
Основываясь на ответе @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.
если мы вернем false; то текущий char не будет добавляться к текстовой странице.
$('#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
<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
});
Удачи:)
Вы можете использовать этот script. Он должен хорошо работать на Windows, даже если нажата клавиша Shift, но при работе с Mac OS она не будет работать.
Вот пользовательский плагин 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();
});
Код 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>
Теперь нам нужно связать этот 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;
}
});При вводе, если функция блокировки включена, она может автоматически преобразовывать текущий char в нижний регистр. Таким образом, даже если caplocks включен, он не будет вести себя так, как на текущей странице. Чтобы сообщить своим пользователям, вы можете отобразить текст, в котором говорится, что блокировки включены, но что записи формы преобразуются.
Существует гораздо более простое решение для обнаружения caps-lock:
function isCapsLockOn(event) {
var s = String.fromCharCode(event.which);
if (s.toUpperCase() === s && s.toLowerCase() !== s && !event.shiftKey) {
return true;
}
}