jQuery Event Keypress: какая клавиша была нажата?

Question

С помощью jQuery, как узнать, какая клавиша была нажата при привязке к событию нажатия клавиши?

$('#searchbox input').bind('keypress', function(e) {});

Я хочу инициировать отправку при нажатии ENTER .

[Update]

Несмотря на то, что я нашел (или лучше: один) ответ сам, кажется, есть место для вариаций;)

Есть ли разница между keyCode и which - особенно если я просто ищу ENTER , который никогда не будет ключом Unicode?

Некоторые браузеры предоставляют одно свойство, а другие предоставляют другое?

Answer 1

Подробное описание поведения различных браузеров http://unixpapa.com/js/key.html

Answer 2

Хорошо, я был слеп:

e.which

будет содержать код ключа ASCII.

См. https://developer.mozilla.org/En/DOM/Event.which

Answer 3

Я просто дополню код решения этой строкой e.preventDefault();. В случае ввода поля формы мы не посещаем, чтобы отправить на ввод нажал

var code = (e.keyCode ? e.keyCode : e.which);
 if(code == 13) { //Enter keycode
   e.preventDefault();
   //Do something
 }

Answer 4

Ведьма;)

/*
This code is for example. In real life you have plugins like :
https://code.google.com/p/jquery-utils/wiki/JqueryUtils
https://github.com/jeresig/jquery.hotkeys/blob/master/jquery.hotkeys.js
https://github.com/madrobby/keymaster
http://dmauro.github.io/Keypress/

http://api.jquery.com/keydown/
http://api.jquery.com/keypress/
*/

var event2key = {'97':'a', '98':'b', '99':'c', '100':'d', '101':'e', '102':'f', '103':'g', '104':'h', '105':'i', '106':'j', '107':'k', '108':'l', '109':'m', '110':'n', '111':'o', '112':'p', '113':'q', '114':'r', '115':'s', '116':'t', '117':'u', '118':'v', '119':'w', '120':'x', '121':'y', '122':'z', '37':'left', '39':'right', '38':'up', '40':'down', '13':'enter'};

var documentKeys = function(event) {
    console.log(event.type, event.which, event.keyCode);

    var keycode = event.which || event.keyCode; // par exemple : 112
    var myKey = event2key[keycode]; // par exemple : 'p'

    switch (myKey) {
        case 'a':
            $('div').css({
                left: '+=50'
            });
            break;
        case 'z':
            $('div').css({
                left: '-=50'
            });
            break;
        default:
            //console.log('keycode', keycode);
    }
};

$(document).on('keydown keyup keypress', documentKeys);

Демо: http://jsfiddle.net/molokoloco/hgXyq/24/

Answer 5

Добавить скрытую отправку, а не тип скрытой, просто отправка со стилем = "display: none". Вот пример (удалены ненужные атрибуты из кода).

<form>
  <input type="text">
  <input type="submit" style="display:none">
</form>

Принимает ключ ввода изначально, JavaScript не требуется, работает в любом браузере.

Answer 6

Вот расширение jquery, которое будет обрабатывать нажатие клавиши ввода.

(function ($) {
    $.prototype.enterPressed = function (fn) {
        $(this).keyup(function (e) {
            if ((e.keyCode || e.which) == 13) {
                fn();
            }
        });
    };
}(jQuery || {}));

$("#myInput").enterPressed(function() {
    //do something
});

Рабочий пример можно найти здесь http://jsfiddle.net/EnjB3/8/

Answer 7

Некоторые браузеры используют keyCode, другие используют который. Если вы используете jQuery, вы можете надежно использовать то, что jQuery стандартизирует. На самом деле,

$('#searchbox input').bind('keypress', function(e) {
    if(e.keyCode==13){

    }
});

Answer 8

$(document).bind('keypress', function (e) {
    console.log(e.which);  //or alert(e.which);

});

у вас должен быть firbug, чтобы увидеть результат в консоли

Answer 9

Я только что создал плагин для jQuery, который позволяет keypress событий. Вместо того, чтобы найти номер и ввести его, все, что вам нужно сделать, это:

Как это использовать

1. Включите код, который у меня есть ниже
2. Запустите этот код:

$(document).keydown(function(e) {
    if (getPressedKey(e) == theKeyYouWantToFireAPressEventFor /*Add 'e.ctrlKey here to only fire if the combo is CTRL+theKeyYouWantToFireAPressEventFor'*/) {
        // Your Code To Fire When You Press theKeyYouWantToFireAPressEventFor 
    }
});

Это так просто. Обратите внимание, что theKeyYouWantToFireAPressEventFor - это не число, а строка (например, "a" для запуска при нажатии A , "ctrl" для запуска при CTRL (управление) нажата, или, в случае числа, просто 1, без кавычек. Это сработает при нажатии 1 .)

Пример / Код:

function getPressedKey(e){var a,s=e.keyCode||e.which,c=65,r=66,o=67,l=68,t=69,f=70,n=71,d=72,i=73,p=74,u=75,h=76,m=77,w=78,k=79,g=80,b=81,v=82,q=83,y=84,j=85,x=86,z=87,C=88,K=89,P=90,A=32,B=17,D=8,E=13,F=16,G=18,H=19,I=20,J=27,L=33,M=34,N=35,O=36,Q=37,R=38,S=40,T=45,U=46,V=91,W=92,X=93,Y=48,Z=49,$=50,_=51,ea=52,aa=53,sa=54,ca=55,ra=56,oa=57,la=96,ta=97,fa=98,na=99,da=100,ia=101,pa=102,ua=103,ha=104,ma=105,wa=106,ka=107,ga=109,ba=110,va=111,qa=112,ya=113,ja=114,xa=115,za=116,Ca=117,Ka=118,Pa=119,Aa=120,Ba=121,Da=122,Ea=123,Fa=114,Ga=145,Ha=186,Ia=187,Ja=188,La=189,Ma=190,Na=191,Oa=192,Qa=219,Ra=220,Sa=221,Ta=222;return s==Fa&&(a="numlock"),s==Ga&&(a="scrolllock"),s==Ha&&(a="semicolon"),s==Ia&&(a="equals"),s==Ja&&(a="comma"),s==La&&(a="dash"),s==Ma&&(a="period"),s==Na&&(a="slash"),s==Oa&&(a="grave"),s==Qa&&(a="openbracket"),s==Ra&&(a="backslash"),s==Sa&&(a="closebracket"),s==Ta&&(a="singlequote"),s==B&&(a="ctrl"),s==D&&(a="backspace"),s==E&&(a="enter"),s==F&&(a="shift"),s==G&&(a="alt"),s==H&&(a="pause"),s==I&&(a="caps"),s==J&&(a="esc"),s==L&&(a="pageup"),s==M&&(a="padedown"),s==N&&(a="end"),s==O&&(a="home"),s==Q&&(a="leftarrow"),s==R&&(a="uparrow"),s==S&&(a="downarrow"),s==T&&(a="insert"),s==U&&(a="delete"),s==V&&(a="winleft"),s==W&&(a="winright"),s==X&&(a="select"),s==Z&&(a=1),s==$&&(a=2),s==_&&(a=3),s==ea&&(a=4),s==aa&&(a=5),s==sa&&(a=6),s==ca&&(a=7),s==ra&&(a=8),s==oa&&(a=9),s==Y&&(a=0),s==ta&&(a=1),s==fa&&(a=2),s==na&&(a=3),s==da&&(a=4),s==ia&&(a=5),s==pa&&(a=6),s==ua&&(a=7),s==ha&&(a=8),s==ma&&(a=9),s==la&&(a=0),s==wa&&(a="times"),s==ka&&(a="add"),s==ga&&(a="minus"),s==ba&&(a="decimal"),s==va&&(a="devide"),s==qa&&(a="f1"),s==ya&&(a="f2"),s==ja&&(a="f3"),s==xa&&(a="f4"),s==za&&(a="f5"),s==Ca&&(a="f6"),s==Ka&&(a="f7"),s==Pa&&(a="f8"),s==Aa&&(a="f9"),s==Ba&&(a="f10"),s==Da&&(a="f11"),s==Ea&&(a="f12"),s==c&&(a="a"),s==r&&(a="b"),s==o&&(a="c"),s==l&&(a="d"),s==t&&(a="e"),s==f&&(a="f"),s==n&&(a="g"),s==d&&(a="h"),s==i&&(a="i"),s==p&&(a="j"),s==u&&(a="k"),s==h&&(a="l"),s==m&&(a="m"),s==w&&(a="n"),s==k&&(a="o"),s==g&&(a="p"),s==b&&(a="q"),s==v&&(a="r"),s==q&&(a="s"),s==y&&(a="t"),s==j&&(a="u"),s==x&&(a="v"),s==z&&(a="w"),s==C&&(a="x"),s==K&&(a="y"),s==P&&(a="z"),s==A&&(a="space"),a}

$(document).keydown(function(e) {
  $("#key").text(getPressedKey(e));
  console.log(getPressedKey(e));
  if (getPressedKey(e)=="space") {
    e.preventDefault();
  }
  if (getPressedKey(e)=="backspace") {
    e.preventDefault();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>The Pressed Key: <span id=key></span></p>

Поскольку длинная версия такая ... ну ... длинная, я сделал для нее ссылку на PasteBin:
http://pastebin.com/VUaDevz1

Answer 10

Согласно ответу Килиана:

Если только введите , важно нажать клавишу:

<form action="javascript:alert('Enter');">
<input type=text value="press enter">
</form>