2013-08-07 3 views
1

Хорошо, поэтому я понимаю, как получить значение ключа при использовании поля ввода ... но я принимаю значения клавиш, которые нажимаются, пока ваш браузер не фокусируется на любое текстовое поле или область текста.Как получить ключевые значения в HTML/Javascript

Я пытаюсь сделать экранную клавиатуру с кнопками для 0, 1, 2, .. 9 ... однако я хочу, чтобы пользователь мог нажимать кнопки с помощью клавиш на клавиатуре.

Я видел это на некоторых веб-сайтах, где, если вы нажмете клавишу S на главной странице, вы попадете на экран ввода. Facebook также делает ключ L, как фотографию.

Итак, вопрос в том, как получить ключевые значения в javascript, когда курсор не сфокусирован.

ответ

4

Если вы используете JQuery вы просто добавить обработчик события к документу ...

$(document).keypress(function(event) { 
     alert('Handler for .keypress() called. - ' + event.which); 
}); 

(Из http://forum.jquery.com/topic/how-to-catch-keypress-on-body)

Edit для комментариев zzzzBov в ...

С Документация JQuery KeyPress:

Чтобы определить, какой символ был введен, проверьте объект события , который передается функции обработчика. В то время как браузеры используют разные свойства , чтобы сохранить эту информацию, jQuery нормализует свойство .which , чтобы вы могли надежно использовать его для извлечения кода символа.

+0

'event.which', вероятно, лучший выбор – zzzzBov

0

Вы должны слушать по ключевым пресс-конференции.

document.onkeypress = function(evt) { 
    evt = evt || window.event; 
    var charCode = evt.which || evt.keyCode; 
    alert("Character typed: " + String.fromCharCode(charCode)); 
}; 

Для получения дополнительной информации Смотрите здесь Link

0

Вам нужно добавить слушатель события к окну. Затем в обработчике событий вы получаете свойство keyCode из переданного события. KeyCodes являются полу-произвольными в том смысле, что они непосредственно не сопоставляются с тем, что вы можете подумать, поэтому вам нужно использовать таблицу (первый результат в google: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes), чтобы идентифицировать нужные коды ключей.

window.addEventListener('keypress',function (evt) { 
    switch (evt.keyCode) { 
     case 48: 
      zeroKeyPressed(); break; 
     case 49: 
      oneKeyPressed(); break; 
     ... 
    } 
}, false); 
0

Вы бы использовали ключевое событие для прессы.

Вот пример для использования:

window.addEventListener('keypress', function (event) { 

    var key_code, key; 

    event = event || window.event; // IE 

    key_code = event.charCode || event.keyCode || event.which || 0; 
    key = String.fromCharCode(key_code); 

    // prevent keys 0-9 from doing what they normally would do 
    if (key_code >= 48 && <= 57) { 
     event.preventDefault(); 
     alert('The user pressed ' + key); 
    } 

}, false);