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?


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.


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 .


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.


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).


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

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
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.