2012-02-19 2 views
11

Я пытаюсь разобрать KeyDown события из цифрового блока со следующим:Javascript цифрового блока скан разборе

$('#myDiv').keydown(function(e) { 
    val = String.fromCharCode(e.which) 
}); 

Проблема заключается в том, что клавиатура 0-9 возвращаемые коды клавиши из 96-105, которые, согласно fromCharCode() являются строчными буквами a-i. Как мне получить события смены клавиатуры на числовой панели для разрешения соответствующего номера?

ответ

21

Вы не: использовать keypress событие. Событие keypress - единственное событие, которое даст вам достоверную информацию о типизированных символах. Ваш существующий код будет работать, если вы просто измените keydown на keypress.

+1

Предположим, что я и хочу реальные символы с клавиатуры, а также хотят, чтобы захватить и остановить клавишу ввода, чтобы предотвратить отправки формы? Останавливает нажатие клавиши. – enigment

+0

Я не могу выразить, насколько я благодарен за этот ответ. Это было мое спасение, пытаясь поймать все возможные случаи со сдвигом, альт, numpad и мобильными клавишами. 'keypress' делает его легким, как торт! – nirazul

9

Значение в which передано в keydown не является символьным кодом; это ключевой код (и коды меняются от браузера/ОС к браузеру/ОС). Вы можете сопоставить его с персонажем, используя the tables on this page, но сказать, что этот материал немного ... неудобен ... было бы занижать дело. :-)

В противном случае лучше всего дождаться события keypress, которое будет иметь код символа (если применимо), а не код ключа.

Пример: Live copy | Live source

jQuery(function($) { 

    $("#theField") 
    .keydown(function(event) { 
     showKey("keydown", event.which); 
    }) 
    .keypress(function(event) { 
     showKey("keypress", event.which); 
    }) 
    .focus(); 

    function showKey(eventName, which) { 
    display(eventName + 
      ": " + which + " (" + 
      String.fromCharCode(which) + ")"); 
    } 

    function display(msg) { 
    $("<p>").html(msg).appendTo(document.body); 
    } 
}); 

Используя этот HTML:

<input type="text" id="theField"> 
1

Существует способ сделать это с KeyDown, если нажатие клавиши не выполнима из-за событий, отменяющих потребностей и т.д. Используйте оператор, если() с этим тестом:

parseInt(event.keyIdentifier.substring(2),16) > 47 && parseInt(event.keyIdentifier.substring(2),16) < 58 

ИЛИ, с событиями JQuery:

parseInt(event.originalEvent.keyIdentifier.substring(2),16) > 47 && parseInt(event.originalEvent.keyIdentifier.substring(2),16) < 58 

Эти примеры предполагают, что событие является событием keydown. keyIdentifier - это шестнадцатеричное число, которое представляет значение unicode для связанного символа. Используя keyIdentifier, цифры с цифровой клавиатуры и клавиатуры, а цифры над клавиатурой QWERTY будут иметь одинаковые значения, 48 - 57 (U + 0030 - U + 0039), даже с событием keyDown.

Значения Юникода в браузерах будут выглядеть как U + 0030 или U + 002F. Разберите эту строку, чтобы получить только шестнадцатеричное значение, затем используйте parseInt() с радиусом 16, чтобы преобразовать его в base-10.

1

Ответы здесь теперь устарели, потому что KeyboardEvent.which, KeyboardEvent.keyCode и KeyboardEvent.charCode все устарели.

Правильный способ использования последних версий Firefox, Chrome, IE/Edge и Safari для получения символьного ключа - использовать KeyboardEvent.key, и он должен работать с любым ключевым событием, а не только с keypress.

KeyboardEvent.key Browser Compatibility

document. 
 
    querySelector('input'). 
 
    addEventListener('keydown', event => console.log(event.key));
<input placeholder="Start typing...">


Если вам все еще нужно получить код символа, вы должны использовать KeyboardEvent.code свойство.

KeyboardEvent.code Browser Compatibility

document. 
 
    querySelector('input'). 
 
    addEventListener('keydown', event => console.log(event.code));
<input placeholder="Start typing...">

0

вы можете использовать KeyDown и обнаружить ключи NumPad. Я сделал это, используя следующий код. Вычтите 48 из клавиш цифровой клавиатуры перед интерпретацией ключевых

function navigate(e) { 
     var keyCode = e.keyCode || e.which; 
     if (keyCode >= 96 && keyCode <= 105) { 
      // Numpad keys 
      keyCode -= 48; 
     } 
     var txtVal = String.fromCharCode(keyCode); 
Смежные вопросы