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



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 .

Question

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

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




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



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

document.onkeypress = function ( e ) {
  e = e || window.event;
  var s = String.fromCharCode( e.keyCode || e.which );
  if ( s.toUpperCase() === s && !e.shiftKey ) { // incomplete: shift + caps MAY = lowercase
    // alert('caps is on')
  }
}

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

Я не могу думать о каком-либо другом способе фактического обнаружения статуса блокировки шапок. Проверка в любом случае проста, и если набирались не подлежащие обнаружению символы, ну ... тогда обнаружение не было необходимо.

В прошлом году была статья о 24 путях . Очень хорошо, но не хватает поддержки международного характера (используйте toUpperCase() чтобы обойти это).




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



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

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



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

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




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



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

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



реагировать

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



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

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

Удачи :)




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




Related