По работе в плотную встретился с двумя этими событиями, и хочу поделиться своим опытом работы с ними. Заодно приведу пример использования этих событий.
Дело осложнаятся тем, что нету стандарта для событий нажатий клавиш, и поэтому имеются рассхождения в работе в разных браузерах. События
keydown и
keypress в объекте события могут содержать несколько свойств, характеризующих нажатую клавишу:
- charCode - это unicode значение символа связанного с нажатой клавишей;
- keyCode - код клавиш;
- which - идентичен charCode.
Для пояснения приведу пример - вводимые символы 'a' и 'A' будут иметь одинаковый keyCode, но разыный charCode.
Событие keyPress служит для обработки печатных клавиш (printable characters), т.е. те которые имеют печатные символы: A-Z, 0-9, Enter, Backspace.
Но есть один неприятный момент с этим событием - по своему назначению работет только в IE и Chrome(Webkit браузерах). В FireFox и Opera объект события возвращает коды и клавиш с непечатными символами (Non printable characters) - клавиша Del, стрелочки. Причем коды для печатных и непечатных символов могут совпадать.
Событие keyDown - объект события "отлавливает" как коды печатных символов, так и не печатных символов. При этом код каждой клавиши будет уникальным.
Подробнее про эти два события можно почитать на http://www.quirksmode.org/js/keys.html
Варианты значений свойств объекта события keypress для разных браузеров:
Chrome 15/Safari 5.1.1
Примечание: N- целое число не равное нулю.
Opera 11.52:
FireFox 7:
IE6/7/8/9:
Привожу несколько примеров работы с событиями keypress и keydown.
Последний пример где производится проверка ввода - а именно в поле разрешается вводить только вещественное положительное число, имеет небольшой недостаток при использование. Текст можно ввести не только с клавиаткры, но и вставить из буфера обмена и подстановки самого браузера.
JS код:
Copy Source | Copy HTML
window.onload=function(){
- var tst1=id("tst1"),
- dbg1=id("dbg1"),
- tst2=id("tst2"),
- dbg2=id("dbg2");
- event(tst1,"keypress",function(e){
- var nonPrintable,printable; // параметры с помощью которых попытаемся решить проблему с кросс браузерностью
- if((e.charCode=== 0||e.charCode===undefined)&&e.which=== 0)
- nonPrintable=e.keyCode;
- printable=e.which?e.which:(e.which===undefined&&e.charCode===undefined)?e.keyCode:undefined;
- dbg1.innerHTML="keyCode: "+e.keyCode+", charCode: "+e.charCode+", which: "+e.which+
- " #### caf: "+printable+", yk: "+nonPrintable;
- });
- event(tst2,"keydown",function(e){
- dbg2.innerHTML="keyCode: "+e.keyCode+", charCode: "+e.charCode+", which: "+e.which;
- });
- var num1=id("num1");
- // тегу input добавлем проверку ввода
- event(num1,"keydown",function(e){
- e = (e)?e: (window.event)?window.event:undefined;
- var target;
- if(e) {
- target = (e.target)?e.target:e.srcElement;
- }
- console.dir(e);
- if (e.keyCode===13){// Enter if need
- e.preventDefault? e.preventDefault() : e.returnValue = false;
- }
- if ((e.keyCode>47&&e.keyCode<58)||e.keyCode===8||e.keyCode===37||e.keyCode===39||e.keyCode==46){
- e.returnValue=true; // [0..9] -> [47..58], 8 - backsace, 37 - Left, 39 - Right, 46 -Delete
- }else if (e.keyCode===188 || e.keyCode===190){
- var s=target.value, // input field!
- i= 0,count= 0;
- while (s[i]){
- if (s[i]==='.' || s[i]===',')
- count++;
- i++;
- }
- e.returnValue=count=== 0;// Точка или запятая может быть только одна в водимом числе
- if(count!== 0 && e.preventDefault)// Condition for FireFox
- e.preventDefault();
- }else{
- e.preventDefault? e.preventDefault() : e.returnValue = false;
- }
- });
- };
- function id(s){
- return document.getElementById(s);
- }
- function event(obj,name,handler){
- if (obj.attachEvent){
- obj.attachEvent("on"+name,handler);
- }else{
- obj.addEventListener(name,handler);
- }
- }
html код:
Copy Source | Copy HTML
<p id="tst1" contenteditable="true">Пример на событие keypress</p>
- <p id="dbg1"></p>
- <p id="tst2" contenteditable="true">Пример на событие keydown</p>
- <p id="dbg2"></p>
- <p>Пример - Введите число 1: <input type="text" id="num1"/></p>