Simular la pulsación de teclas con jQuery

79

Usando jQuery, ¿cómo puedo simular (activar?) Un KeyPress cuando se hace clic en un enlace? Por ejemplo, cuando un usuario hace clic en el siguiente enlace:

<a id="clickforspace" href="#">Click Here</a>

Luego, al hacer clic en el enlace, sería como si presionaran la "barra espaciadora" en su teclado.

Algo como esto, supongo:

$("#clickforspace").click(function(e) { 
    e.preventDefault(); 
    //... Some type of code here to initiate "spacebar" //
                                      });

¿Alguna idea sobre cómo lograr esto?

Dodinas
fuente
2
Esto podría responder a su pregunta.
themis
Tengo curiosidad: al intentar reemplazar clickcon la barra espaciadora, ¿realmente deseaba que el navegador se desplazara hacia abajo en la página? Presionar la barra espaciadora en un enlace generalmente tiene el mismo efecto que presionar la tecla de avance de página.
Joel Purra

Respuestas:

15

El evento de pulsación de tecla de jQuery está destinado a realizar este tipo de trabajo. Puede activar el evento pasando una cadena "pulsación de tecla" a .trigger (). Sin embargo, para ser más específico, también puede pasar un objeto jQuery.Event (especifique el tipo como "pulsación de tecla") y proporcione las propiedades que desee, como el código clave que es la barra espaciadora.

http://docs.jquery.com/Events/trigger#eventdata

Lea la documentación anterior para obtener más detalles.

Dmitriy Likhten
fuente
54
Seguro, lee la documentación, pero el cartel probablemente ya lo sabía. La documentación de eventos de jQuery es un poco opaca. Andrew Culver dio una respuesta directa, además de una referencia para obtener más información.
Roy Leban
142

Creo que esto es lo que estás buscando:

var press = jQuery.Event("keypress");
press.ctrlKey = false;
press.which = 40;
$("whatever").trigger(press);

De aqui .

Andrew Culver
fuente
17
Esto no producirá ningún texto real si se usa con control de entrada, por ejemplo.
Alex Burtsev
5
@AlexBurtsev: tiene razón, eso se debe a que esto solo activa el controlador de eventos como si se presionara la tecla específica, pero en realidad no presiona esa tecla como sucede cuando se presiona una tecla en el teclado (probablemente por razones de seguridad)
BornToCode
6
¿Hay alguna razón por la que entremezclas '$' y 'jQuery'?
Danny Andrews
4
Lo que escribiste no me funcionó en jQuery 2.2.3 en Chrome. :( Pero esto hizo:$("whatever").trigger($.Event("keydown", {keyCode: 40}))
Jonathan Benn
1
Sobre la base del método de Jonathan Benn, también puede utilizar la misma técnica para enviar la clave en lugar de enviar un código clave (ya que los códigos clave están marcados como obsoletos). Por ejemplo: $ ("lo que sea"). Trigger ($. Event ("keyup", {key: "Enter"})) - y opcionalmente, como se muestra, con diferentes eventos de teclado.
Alan M.
40

Otra opción:

$(el).trigger({type: 'keypress', which: 13, keyCode: 13});

http://api.jquery.com/trigger/

Denis Ivanov
fuente
1
No estoy seguro de para qué whichsirve. Solo las keyCodeobras para mí en SAPUI5 (jQuery 2.2.3 en Chrome)
Jonathan Benn
12

Puede probar este complemento jQuery de SendKeys:

http://bililite.com/blog/2011/01/23/improved-sendkeys/

$(element).sendkeys(string)inserta una cadena en el punto de inserción en una entrada, área de texto u otro elemento con contenteditable = true. Si el punto de inserción no está actualmente en el elemento, recuerda dónde estaba el punto de inserción cuando se llamó por última vez a sendkeys (si el punto de inserción nunca estuvo en el elemento, se agrega al final).

Robert Harvey
fuente
No necesita jQuery para usar esto, puede usar la misma funcionalidad con solo obtener la bililiteRangebiblioteca: github.com/dwachss/bililiteRange (de hecho, el complemento jQuery es solo una envoltura delgada alrededor de esta increíble biblioteca que se sostiene por sí sola ).
fiatjaf
5

Esto funciona:

var event = jQuery.Event('keypress');
event.which = 13; 
event.keyCode = 13; //keycode to trigger this for simulating enter
jQuery(this).trigger(event); 
Anoop PD
fuente
1
[var event = jQuery.Event ('pulsación de tecla'); event.which = 13; event.keyCode = 13; jQuery (this) .trigger (event);] intente esto
Anoop PS
Necesitaba hacer clic en Enter en un cuadro de diálogo, así que con el fragmento aquí, reemplacé esto con #myEl .. gracias
Gene Bo