JavaScript KeyCode против CharCode - PullRequest
       5

JavaScript KeyCode против CharCode

40 голосов
/ 26 ноября 2010

Проблема:

  • Ограничить разрешенные символы в HTML-вводе только a-z A-Z.
  • Для бизнес-требований это должно быть сделано на KeyPress, чтобы символ просто не мог даже появиться на входе.
  • Tab, Enter, стрелки, Backspace, Shift разрешены. Пользователь должен иметь возможность свободно входить и выходить из текстового поля, удалять символы и т. Д. И т. Д.

Это отправная точка моего кода ...

var keyCode = (e.keyCode ? e.keyCode : e.which);

Однако каждое значение, которое я получаю в keyCode , не соответствует любому таблиц символов, которые я видел в Интернете. Например, символ «h» дает мне код возврата 104.

Отличается ли KeyCode от CharCode? Какой код содержит управляющие символы? Нужно ли конвертировать?

Как я могу ограничить ввод для a-z A-Z и разрешить нужные мне ключи в JavaScript?

Ответы [ 8 ]

61 голосов
/ 26 ноября 2010

Ответы на все ваши вопросы можно найти на следующей странице .

... но в итоге:

  • Единственное событие, из которого вы можете надежно получить информацию о символах (в отличие от информации кода ключа), - это событие keypress.
  • В событии keypress все браузеры, кроме IE <= 8, сохраняют код символа в свойстве <code>which события. Большинство, но не все эти браузеры также хранят код символа в свойстве charCode.
  • В событии keypress IE <= 8 сохраняет код символа в свойстве <code>keyCode.

Это означает, что для получения кода символа, соответствующего нажатию клавиши, следующее будет работать везде, при условии, что объект события нажатия клавиши хранится в переменной с именем e:

var charCode = (typeof e.which == "number") ? e.which : e.keyCode

Это обычно возвращает вам код символа, где он существует, и 0 в противном случае. Есть несколько случаев, когда вы получите ненулевое значение, когда вы не должны:

  • В Opera <10.50 для клавиш <kbd>Вставить , Удалить , Домой и Конец
  • В последних версиях Konqueror для не символьных клавиш.

Обходной путь для первой проблемы немного сложен и требует также использования события keydown.

10 голосов
/ 14 февраля 2014

Хорошее горе. KeyboardEvent. [Key, char, keyCode, charCode, которые] устарели или имеют в настоящее время выдающиеся ошибки в соответствии с документами API Mozilla - https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent. Даже JQuery справляется с этим и позволяет пользователю выяснить это https://api.jquery.com/keydown/.

5 голосов
/ 27 ноября 2010

На самом деле, 104 - это код ASCII для строчной буквы 'h'.Чтобы получить ASCII-код набранного символа onkeypress, вы можете просто использовать e.which || e.keyCode, и вам не нужно беспокоиться о удерживаемых клавишах, потому что для набранного текста нажатие клавиши автоматически повторяется во всех браузерах (в соответствии с отличным http://unixpapa.com/js/key.html).

Итак, все, что вам действительно нужно, это:

<input id="textbox">

<script type="text/javascript">
document.getElementById('textbox').onkeypress = function(e){
  var c = e.which || e.keyCode;
  if((c > 31 && c < 65) || (c > 90 && c < 97) || (c > 122 && c !== 127))
    return false;
};
</script>

Попробуйте: http://jsfiddle.net/wcDCJ/1/

(коды ASCII взяты из http://en.wikipedia.org/wiki/Ascii)

2 голосов
/ 26 ноября 2010

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

onKeyUp и onKeyDown имеют одинаковые коды символов для букв верхнего и нижнего регистра. Рекомендуется использовать onKeyUp, потому что он наиболее близок к onKeyPress

0 голосов
/ 22 июля 2015

Вот пример разметки:

<form id="formID">
    <input type="text" id="filteredInput">
    <input type="text" id="anotherInput">
</form>

Следующая логика может использоваться для перехвата ввода с клавиатуры (в данном случае через готовую оболочку для документов jQuery).

Это может показаться немного глупым, но в основном я проверяю все, что я хочу разрешить (в вашем случае, буквы от A до Z нечувствительны к регистру) и ничего не делают . Другими словами, действие по умолчанию разрешено, но любой ввод, кроме альфа, запрещен.

Проверяется и разрешается стандартная навигация с помощью клавиатуры, например клавиши со стрелками, Начало, Конец, Вкладка, Возврат, Удалить и т. Д.

ПРИМЕЧАНИЕ. Этот код изначально был написан для удовлетворения пользовательского ввода, допускающего только буквенно-цифровые значения (A - Z, a - z, 0 - 9), и я оставил эти строки без изменений в качестве комментариев.

        <script>
            jQuery( document ).ready( function() {

                // keydown is used to filter input
                jQuery( "#formID input" ).keydown( function( e ) {
                    var _key = e.which
                        , _keyCode = e.keyCode
                        , _shifted = e.shiftKey
                        , _altKey = e.altKey
                        , _controlKey = e.ctrlKey
                    ;
                    //console.log( _key + ' ' + _keyCode + ' ' + _shifted + ' ' + _altKey + ' ' + _controlKey );

                    if( this.id === jQuery( '#filteredInput' ).prop( 'id' ) ) {
                        if(
                            // BACK,         TAB
                            ( _key === 8 || _key === 9 )    // normal keyboard nav
                        ){}

                        else if(
                            // END,           HOME,          LEFT,          UP,            RIGHT,         DOWN
                            ( _key === 35 || _key === 36 || _key === 37 || _key === 38 || _key === 39 || _key === 40 )  // normal keyboard nav
                        ){}

                        else if(
                            // DELETE
                            ( _key === 46 ) // normal keyboard nav
                        ){}

                        else if(
                            ( _key >= 65 && _key <= 90 )    // a- z

                            //( _key >= 48 && _key <=  57 && _shifted !== true ) ||   // 0 - 9 (unshifted)
                            //( _key >= 65 && _key <=  90 ) ||                        // a- z
                            //( _key >= 96 && _key <= 105 )                           // number pad 0- 9
                        ){}

                        else {
                            e.preventDefault();
                        }
                    }

                });
            });
        </script>
0 голосов
/ 26 ноября 2010

Я думаю, что вы принимаете неправильный подход полностью. Как насчет чего-то вроде:

<input id="test">

<script type="text/javascript">
var aToZ = function(el){
    if(this.value.match(/[^a-zA-Z]/)){
        this.value = this.value.replace(/[^a-zA-Z]+/, '')
    }
}
document.getElementById("test").onkeyup = aToZ
</script>

Также не забудьте повторить проверку на стороне сервера.

0 голосов
/ 26 ноября 2010

/ * Вы не получите keyCode при нажатии клавиш для непечатаемых ключей, почему бы не запечатлеть их на клавиатуре? * /

function passkeycode(e){
    e= e || window.event;
    var xtrakeys={
        k8: 'Backspace', k9: 'Tab', k13: 'Enter', k16: 'Shift', k20: 'Caps Lock',
        k35: 'End', k36: 'Home', k37: 'Ar Left', k38: 'Ar Up', k39: 'Ar Right',
        k40: 'Ar Down', k45: 'Insert', k46: 'Delete'
    },
    kc= e.keyCode;
    if((kc> 64 && kc<91) || xtrakeys['k'+kc]) return true;
    else return false;
}

inputelement.onkeydown=passkeycode;

kc> 64 && kc <91 // a-zA-Z </p>

xtrakeys ['k' + integer]) определяет разрешенные специальные коды клавиш

0 голосов
/ 26 ноября 2010

Я думаю, что keyCode возвращает значение ключа ASCII, Ascii-104 равно h.

http://www.asciitable.com/

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

Вот статья с примером crssbrowser: http://santrajan.blogspot.com/2007/03/cross-browser-keyboard-handler.html

...