JavaScript KeyCode vs CharCode
Проблема:
- Ограничить допустимые символы в HTML-вводе только для a-z A-Z.
- Для бизнес-требований это необходимо сделать на KeyPress, чтобы символ просто не разрешался даже появляться на входе.
- Вкладка, ввод, стрелки, обратное пространство, сдвиг разрешены. Пользователь должен иметь возможность свободно перемещаться в текстовом поле и из него, удалять символы и т.д. И т.д.
Это отправная точка моего кода...
var keyCode = (e.keyCode ? e.keyCode : e.which);
Однако любое значение, которое я получаю в keyCode, не соответствует ни одной из графиков символов, которые я видел в Интернете. Например, символ "h" дает мне код возврата 104.
Является ли KeyCode отличным от CharCode? Какой код содержит контрольные символы? Мне нужно преобразовать?
Как я могу ограничить ввод в a-z A-Z и разрешить ключи, которые мне нужны в JavaScript?
Ответы
Ответ 1
Ответы на все ваши вопросы можно найти на на следующей странице.
... но в итоге:
- Единственное событие, из которого вы можете надежно получить информацию о символе (в отличие от key code информации), - это событие
keypress
.
- В событии
keypress
все браузеры, кроме IE <= 8, сохраняют код символа в свойстве события which
. Большинство, но не все из этих браузеров также сохраняют код символа в свойстве charCode
.
- В событии
keypress
IE <= 8 хранит код символа в свойстве keyCode
.
Это означает, что код символа, соответствующий нажатию клавиши, будет работать везде, предполагая, что объект события нажатия клавиши хранится в переменной с именем e
:
var charCode = (typeof e.which == "number") ? e.which : e.keyCode
Это обычно возвращает вам код символа, где он существует, и 0 в противном случае. Есть несколько случаев, когда вы получите ненулевое значение, если не хотите:
- В Opera < 10.50 для клавиш Insert, Delete, Home и End
- В последних версиях Konqueror для несимметричных клавиш.
Обходной путь для первой проблемы немного связан и требует использования события keydown
.
Ответ 2
Хорошее горе. KeyboardEvent. [Key, char, keyCode, charCode, которые] все устарели или в настоящее время имеют выдающиеся ошибки в соответствии с документами API Mozilla - https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent. Даже JQuery передает этот код и позволяет пользователю понять его https://api.jquery.com/keydown/.
Ответ 3
Фактически, 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)
Ответ 4
onKeyPress имеет разные коды для букв верхнего и нижнего регистра. Вероятно, вы обнаружите, что включение защитного колпачка, а затем написание вашего письма даст вам код, который вы ожидаете
onKeyUp и onKeyDown имеют одинаковые коды символов для верхних и строчных букв. Он рекомендует использовать onKeyUp, потому что он ближе всего к onKeyPress
Ответ 5
/*
Вы не получите 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
xtrakeys ['k' + integer]) определяет специальные допустимые коды клавиш
Ответ 6
Вот пример разметки:
<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>
Ответ 7
Я думаю, что keyCode возвращает значение ключа ASCII, Ascii-104 - h.
http://www.asciitable.com/
Charcode, как указано в другом ответе, используется в некоторых браузерах.
Вот статья с примером crssbrowser: http://santrajan.blogspot.com/2007/03/cross-browser-keyboard-handler.html
Ответ 8
Я думаю, что вы совершенно ошибаетесь. Как насчет чего-то типа:
<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>
Кроме того, не забудьте также повторить проверку на стороне сервера.