javascript - tecla - keypress jquery ejemplos

jQuery Event Keypress: ¿Qué tecla fue presionada?

Question

Con jQuery, ¿cómo puedo saber qué tecla se presionó al enlazar con el evento de pulsación de tecla?

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

Quiero activar un envío cuando se presiona ENTER .

[Actualizar]

Aunque encontré la respuesta (o mejor: una) a mi mismo, parece que hay un margen de variación;)

¿Hay una diferencia entre keyCode y which , especialmente si solo estoy buscando ENTER , que nunca será una clave Unicode?

¿Algunos navegadores proporcionan una propiedad y otros proporcionan la otra?

Answer 1

Utilice event.key y moderno JS!

Ya no hay códigos numéricos . Puede consultar la clave directamente. Por ejemplo, "Enter" , "LeftArrow" , "r" o "R" .

const input = document.getElementById("searchbox");
input.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        // Submit
    }
    else if (event.key === "Q") {
        // Play quacking duck sound, maybe...
    }
});

Mozilla Docs

Navegadores compatibles

Answer 2

... este ejemplo impide el envío de formularios (normalmente la intención básica al capturar la tecla # 13):

$(''input#search'').keypress(function(e) {
  if (e.which == ''13'') {
     e.preventDefault();
     doSomethingWith(this.value);
   }
});

Answer 3

Acabo de crear un complemento para jQuery que permite eventos de keypress más fáciles. En lugar de tener que encontrar el número y ponerlo, todo lo que tienes que hacer es esto:

Cómo usarlo

1. Incluya el código que tengo debajo
2. Ejecutar este código:

$(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 
    }
});

Es así de simple. Tenga en cuenta que el theKeyYouWantToFireAPressEventFor no es un número, sino una cadena (por ejemplo, "a" para disparar cuando se presiona A, "ctrl" para disparar cuando se presiona CTRL (control) , o, en el caso de un número, solo 1 , no comillas. Eso se dispararía cuando se presiona 1 ).

El Ejemplo / Código:

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>

Debido a que la versión larga es tan ... bien ... larga, he creado un enlace PasteBin para ella:
http://pastebin.com/VUaDevz1

Answer 4

Agregue un envío oculto, no escriba oculto, solo envíe sin formato con style = "display: none". Aquí hay un ejemplo (se eliminaron atributos innecesarios del código).

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

aceptará la clave de ingreso de forma nativa, sin necesidad de JavaScript, funciona en todos los navegadores.

Answer 5

Algunos navegadores usan keyCode, otros usan cuales. Si está utilizando jQuery, puede usarlo de manera confiable, ya que jQuery estandariza las cosas. Actualmente,

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

    }
});

Answer 6

Aquí hay una descripción detallada del comportamiento de varios navegadores http://unixpapa.com/js/key.html

Answer 7

Aquí hay una extensión jquery que manejará la tecla enter que se presiona.

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

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

Un ejemplo de trabajo se puede encontrar aquí http://jsfiddle.net/EnjB3/8/

Answer 8

Bruja;)

/*
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);

Demostración: http://jsfiddle.net/molokoloco/hgXyq/24/

Answer 9

Dado que está utilizando jQuery, debe usar absolutamente .which. Sí, diferentes navegadores establecen diferentes propiedades, pero jQuery los normalizará y establecerá el valor de .which en cada caso. Consulte la documentación en http://api.jquery.com/keydown/ que dice:

Para determinar qué tecla se presionó, podemos examinar el objeto de evento que se pasa a la función del controlador. Mientras que los navegadores usan diferentes propiedades para almacenar esta información, jQuery normaliza la propiedad .which para que podamos usarla de manera confiable para recuperar el código clave.

Answer 10

Edición: Esto solo funciona para IE ...

Me doy cuenta de que esta es una publicación antigua, pero alguien podría encontrar esto útil.

Los eventos clave se asignan, por lo que, en lugar de utilizar el valor del código clave, también puede utilizar el valor clave para hacerlo un poco más legible.

$(document).ready( function() {
    $(''#searchbox input'').keydown(function(e)
    {
     setTimeout(function ()
     { 
       //rather than using keyup, you can use keydown to capture 
       //the input as it''s being typed.
       //You may need to use a timeout in order to allow the input to be updated
     }, 5);
    }); 
    if(e.key == "Enter")
    {
       //Enter key was pressed, do stuff
    }else if(e.key == "Spacebar")
    {
       //Spacebar was pressed, do stuff
    }
});

Aquí hay una hoja de trucos con las claves asignadas que obtuve de este blog

Answer 11

En realidad esto es mejor:

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

Answer 12

Está bien, estaba ciego:

e.which

contendrá el código ASCII de la clave.

Consulte https://developer.mozilla.org/En/DOM/Event.which

Answer 13

Esta es la lista completa de códigos clave:

3: "break",
8: "backspace / delete",
9: "tab",
12: ''clear'',
13: "enter",
16: "shift",
17: "ctrl",
18: "alt",
19: "pause/break",
20: "caps lock",
27: "escape",
28: "conversion",
29: "non-conversion",
32: "spacebar",
33: "page up",
34: "page down",
35: "end",
36: "home ",
37: "left arrow ",
38: "up arrow ",
39: "right arrow",
40: "down arrow ",
41: "select",
42: "print",
43: "execute",
44: "Print Screen",
45: "insert ",
46: "delete",
48: "0",
49: "1",
50: "2",
51: "3",
52: "4",
53: "5",
54: "6",
55: "7",
56: "8",
57: "9",
58: ":",
59: "semicolon (firefox), equals",
60: "<",
61: "equals (firefox)",
63: "ß",
64: "@ (firefox)",
65: "a",
66: "b",
67: "c",
68: "d",
69: "e",
70: "f",
71: "g",
72: "h",
73: "i",
74: "j",
75: "k",
76: "l",
77: "m",
78: "n",
79: "o",
80: "p",
81: "q",
82: "r",
83: "s",
84: "t",
85: "u",
86: "v",
87: "w",
88: "x",
89: "y",
90: "z",
91: "Windows Key / Left ⌘ / Chromebook Search key",
92: "right window key ",
93: "Windows Menu / Right ⌘",
96: "numpad 0 ",
97: "numpad 1 ",
98: "numpad 2 ",
99: "numpad 3 ",
100: "numpad 4 ",
101: "numpad 5 ",
102: "numpad 6 ",
103: "numpad 7 ",
104: "numpad 8 ",
105: "numpad 9 ",
106: "multiply ",
107: "add",
108: "numpad period (firefox)",
109: "subtract ",
110: "decimal point",
111: "divide ",
112: "f1 ",
113: "f2 ",
114: "f3 ",
115: "f4 ",
116: "f5 ",
117: "f6 ",
118: "f7 ",
119: "f8 ",
120: "f9 ",
121: "f10",
122: "f11",
123: "f12",
124: "f13",
125: "f14",
126: "f15",
127: "f16",
128: "f17",
129: "f18",
130: "f19",
131: "f20",
132: "f21",
133: "f22",
134: "f23",
135: "f24",
144: "num lock ",
145: "scroll lock",
160: "^",
161: ''!'',
163: "#",
164: ''$'',
165: ''ù'',
166: "page backward",
167: "page forward",
169: "closing paren (AZERTY)",
170: ''*'',
171: "~ + * key",
173: "minus (firefox), mute/unmute",
174: "decrease volume level",
175: "increase volume level",
176: "next",
177: "previous",
178: "stop",
179: "play/pause",
180: "e-mail",
181: "mute/unmute (firefox)",
182: "decrease volume level (firefox)",
183: "increase volume level (firefox)",
186: "semi-colon / ñ",
187: "equal sign ",
188: "comma",
189: "dash ",
190: "period ",
191: "forward slash / ç",
192: "grave accent / ñ / æ",
193: "?, / or °",
194: "numpad period (chrome)",
219: "open bracket ",
220: "back slash ",
221: "close bracket / å",
222: "single quote / ø",
223: "`",
224: "left or right ⌘ key (firefox)",
225: "altgr",
226: "< /git >",
230: "GNOME Compose Key",
231: "ç",
233: "XF86Forward",
234: "XF86Back",
240: "alphanumeric",
242: "hiragana/katakana",
243: "half-width/full-width",
244: "kanji",
255: "toggle touchpad"

Answer 14

La forma más fácil de hacerlo es:

$("#element").keydown(function(event) {
    if (event.keyCode == 13) {
        localiza_cep(this.value);
    }
});

Answer 15

Prueba esto

$(''#searchbox input'').bind(''keypress'', function(e) {
    if(e.keyCode==13){
        // Enter pressed... do anything here...
    }
});

Answer 16

Prueba esto:

jQuery(''#myInput'').keypress(function(e) {
    code = e.keyCode ? e.keyCode : e.which;
    if(code.toString() == 13) {
        alert(''You pressed enter!'');
    }
});

Answer 17

Según la respuesta de Kilian:

Si solo es importante ingresar una pulsación de tecla:

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

Answer 18

Si está utilizando la interfaz de usuario de jQuery, tiene traducciones para códigos de clave comunes. En ui/ui/ui.core.js :

$.ui.keyCode = { 
    ...
    ENTER: 13, 
    ...
};

También hay algunas traducciones en tests / simulate / jquery.simulate.js pero no pude encontrar ninguna en la biblioteca central de JS. Eso sí, me limité a grep''ed las fuentes. Tal vez haya alguna otra manera de deshacerse de estos números mágicos.

También puede hacer uso de String.charCodeAt y .fromCharCode:

>>> String.charCodeAt(''/r'') == 13
true
>>> String.fromCharCode(13) == ''/r''
true

Answer 19

Solo complementaré el código de la solución con esta línea e.preventDefault(); . En el caso del campo de entrada del formulario, no asistimos para enviar el ingreso, presione

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

Answer 20

Compruebe el excelente complemento jquery.hotkeys que admite combinaciones de teclas:

$(document).bind(''keydown'', ''ctrl+c'', fn);

Answer 21

 // in jquery source code...
 if (!event.which && ((event.charCode || event.charCode === 0) ? event.charCode : event.keyCode)) {
     event.which = event.charCode || event.keyCode;
 }

 // So you have just to use
 $(''#searchbox input'').bind(''keypress'', function(e) {
     if (e.which === 13) {
         alert(''ENTER WAS PRESSED'');
     }
 });

Answer 22

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

});

Deberías tener un firbug para ver un resultado en la consola.

Answer 23

$(document).ready(function(){
    $("#btnSubmit").bind("click",function(){$(''#''+''<%=btnUpload.ClientID %>'').trigger("click");return false;});
    $("body, input, textarea").keypress(function(e){
        if(e.which==13) $("#btnSubmit").click();
    });
});

Espero que esto te pueda ayudar !!!