Forma definitiva de activar eventos de pulsación de teclas con jQuery


260

He leído todas las respuestas a estas preguntas y ninguna de las soluciones parece funcionar.

Además, me da la sensación de que activar la pulsación de teclas con caracteres especiales no funciona en absoluto. ¿Alguien puede verificar quién ha hecho esto?


14
No te pierdas entendido el concepto. No es así como se supone que funciona. El disparador solo llamará al controlador de eventos. En realidad no imprimirá la clave. Si desea simular el efecto de imprimir la clave, simplemente agregue la clave al valor de entrada y active el evento al mismo tiempo.
Nadia Alramli

Interesante, no lo sabía. En ese caso, ¿puede decirme si desencadenar el evento también lo desencadenará para bibliotecas que no sean jquery? por ejemplo, si tengo un onKeydown configurado en JS simple, ¿capturará mi evento "falso"?
mkoryak

2
sí, si hubiera un onkeydown = '...' configurado en js simple. Se activará por el evento falso. No estaba seguro de eso. Pero hice una prueba rápida y funcionó.
Nadia Alramli

2
@ Nadia ¡Gracias por eso! He leído todas las respuestas preguntándome por qué las cosas no estaban funcionando antes de darme cuenta de que mis expectativas no eran correctas. Sospecho que muchas otras personas tendrán los mismos conceptos erróneos.
mikemaccana

3
Dos años más tarde ... al leer la página, parece que la forma definitiva es: $ ('input # search'). Trigger ($. Event ('keydown', {which: $. Ui.keyCode.ENTER, keyCode: $ .ui.keyCode.ENTER}));
molokoloco

Respuestas:


365

Si desea activar el evento de pulsación de tecla o keydown, todo lo que tiene que hacer es:

var e = jQuery.Event("keydown");
e.which = 50; // # Some key code value
$("input").trigger(e);

42
la pregunta es cómo disparar, no cómo capturar
Chad Grant


44
Muy buena respuesta. Vale la pena señalar que jQuery.Event está disponible para jQuery 1.3 o superior. Se hizo relevante en esta pregunta: stackoverflow.com/questions/1823617/…
artlung

8
Esto no funcionó para mí con un control deslizante jQuery UI. Tuve que configurar e.keyCode como la respuesta de OreiA a continuación.
crizCraig

2
fwiw, tuve más éxito con 'keyup' para mi aplicación
marque el

81

Un poco más conciso ahora con jQuery 1.6+ :

var e = jQuery.Event( 'keydown', { which: $.ui.keyCode.ENTER } );

$('input').trigger(e);

(Si no está utilizando jQuery UI, ingrese el código clave correspondiente en su lugar).


44
Solo recuerde sustituir 'keyCode' por 'which' también.
Richard Nienaber

Sí, debe definir qué y keyCode es seguro (si el detector de eventos comprueba e.keyCode, solo funcionará si define keyCode al crear el objeto jQuery.Event)
jackocnr

1
jQuery normaliza qué / keyCode, por lo que poner cualquiera de ellas debería hacer ambas cosas.
Nigel Angel

+1 para el enlace a api.jquery.com; y las versiones actuales de jQuery no normalizan qué / keyCode, por lo que debe suministrar ambos por seguridad
Victor

2
@SamuelLindblom Debería haberlo dejado más claro: jQuery no normaliza las propiedades de eventos transmitidas .trigger(jQuery.Event('name', props)). Mire el ejemplo jsfiddle.net/9ggmrbpd/1 : las propiedades del evento desencadenado se pasan como están. Código fuente: github.com/jquery/jquery/blob/master/src/event.js#L739
Victor

68

La respuesta real tiene que incluir keyCode:

var e = jQuery.Event("keydown");
e.which = 50; // # Some key code value
e.keyCode = 50
$("input").trigger(e);

Aunque el sitio web de jQuery dice que which y keyCode están normalizados, están muy equivocados. Siempre es más seguro hacer las comprobaciones estándar entre navegadores para e.which y e.keyCode y, en este caso, solo definir ambas.


34
+1. Por cierto, e.keyCode = e.which = 50;en una sola línea sería mejor. :)
Sk8erPeter

Me acabo de enterar que usar solo keyCodeno funcionó. Tuve que configurar ambos para que funcione
Tasos K.

@ Sk8erPeter no lo hará a menos que sea una competencia de codificación
golph

18

Si también usa jQuery UI, puede hacer lo siguiente:

var e = jQuery.Event("keypress");
e.keyCode = $.ui.keyCode.ENTER;
$("input").trigger(e);

1
e.que no parece funcionar con mi control deslizante jQuery UI. Gracias por esta respuesta Funciona
crizCraig

5

Lo hice funcionar con keyup.

$("#id input").trigger('keyup');

3
en mi pregunta hace 6 años, también quería establecer el código clave, pero no sabía cómo.
mkoryak

4

Ok, para mí eso funciona con esto ...

var e2key = function(e) {
    if (!e) return '';
    var event2key = {
        '96':'0', '97':'1', '98':'2', '99':'3', '100':'4', '101':'5', '102':'6', '103':'7', '104':'8', '105':'9', // Chiffres clavier num
        '48':'m0', '49':'m1', '50':'m2', '51':'m3', '52':'m4', '53':'m5', '54':'m6', '55':'m7', '56':'m8', '57':'m9', // Chiffres caracteres speciaux
        '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', // Alphabet
        '37':'left', '39':'right', '38':'up', '40':'down', '13':'enter', '27':'esc', '32':'space', '107':'+', '109':'-', '33':'pageUp', '34':'pageDown' // KEYCODES
    };
    return event2key[(e.which || e.keyCode)];
};

var page5Key = function(e, customKey) {
    if (e) e.preventDefault();
    switch(e2key(customKey || e)) {
        case 'left': /*...*/ break;
        case 'right': /*...*/ break;
    }
};

$(document).bind('keyup', page5Key);

$(document).trigger('keyup', [{preventDefault:function(){},keyCode:37}]); 

2

En caso de que necesite tener en cuenta el cursor actual y la selección de texto ...

Esto no estaba funcionando para mí para una aplicación AngularJS en Chrome. Como Nadia señala en los comentarios originales, el personaje nunca es visible en el campo de entrada (al menos, esa fue mi experiencia). Además, las soluciones anteriores no tienen en cuenta la selección de texto actual en el campo de entrada. Tuve que usar una maravillosa biblioteca jquery-selection .

Tengo un teclado numérico personalizado en pantalla que completa múltiples campos de entrada. Tuve que ...

  1. En foco, guarde el elemento lastFocus.element
  2. En el desenfoque, guarde la selección de texto actual (iniciar y detener)

    var pos = element.selection('getPos')
    lastFocus.pos = { start: pos.start, end: pos.end}
  3. Cuando se presiona un botón en mi teclado:

    lastFocus.element.selection( 'setPos', lastFocus.pos)
    lastFocus.element.selection( 'replace', {text: myKeyPadChar, caret: 'end'})

2

Si quieres hacerlo en una sola línea, puedes usar

$("input").trigger(jQuery.Event('keydown', { which: '1'.charCodeAt(0) }));

1

console.log( String.fromCharCode(event.charCode) );

No es necesario mapear el personaje, supongo.


1

Se puede lograr como este docs

$('input').trigger("keydown", {which: 50});

1
Esto no parece funcionar porque usa el argumento extraParameters que no establece nada dentro del argumento del evento pero agrega argumentos adicionales a la devolución de llamada del controlador de eventos.
TimeWaster

1
No es una solución válida
Entwickler el
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.