¿Desencadenar un evento de pulsación de tecla/teclado/tecla en JS/jQuery?

Question

¿Cuál es la mejor manera de simular que un usuario ingrese texto en un cuadro de entrada de texto en JS y/o jQuery?

Me puse quieren poner realmente el texto en el cuadro de entrada, sólo quiero a desencadenar todo caso manipuladores que normalmente se disparará por un usuario escribir información en un cuadro de entrada. Esto significa foco, keydown, keypress, keyup y blur. Creo.

Entonces, ¿cómo se lograría esto?

Answer 1

puede activar cualquiera de los eventos con una llamada directa a ellos, así:

$(function() { 
    $('item').keydown(); 
    $('item').keypress(); 
    $('item').keyup(); 
    $('item').blur(); 
}); 

hace eso lo que estás tratando de hacer?

Debería probablemente desencadenar .focus() y potencialmente .change()

Si desea activar las claves eventos con teclas específicas, puede hacerlo de esta manera:

$(function() { 
    var e = $.Event('keypress'); 
    e.which = 65; // Character 'A' 
    $('item').trigger(e); 
}); 

Hay una cierta discusión interesante de los eventos de pulsación de tecla aquí: jQuery Event Keypress: Which key was pressed?, específicamente con respecto a la compatibilidad de varios navegadores con la propiedad .which.

Answer 2

Para activar ingrese presionando la tecla, tuve que modificar la respuesta @ebynum, específicamente, usando la propiedad keyCode.

e = $.Event('keyup'); 
e.keyCode= 13; // enter 
$('input').trigger(e); 

Answer 3

Ahora usted es capaz de hacer:

var e = $.Event("keydown", {keyCode: 64}); 

Answer 4

Aquí es ejemplo de una vainilla js para desencadenar todo caso: eventos

function triggerEvent(el, type){ 
if ('createEvent' in document) { 
     // modern browsers, IE9+ 
     var e = document.createEvent('HTMLEvents'); 
     e.initEvent(type, false, true); 
     el.dispatchEvent(e); 
    } else { 
     // IE 8 
     var e = document.createEventObject(); 
     e.eventType = type; 
     el.fireEvent('on'+e.eventType, e); 
    } 
} 

Answer 5

Se podría despachar como

el.dispatchEvent(new Event('focus')); 
el.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'})); 

Answer 6

Antes que nada, necesito decir esa muestra de Sionnach733 funcionó a la perfección. Algunos usuarios se quejan de la ausencia de ejemplos reales. Aquí están mis dos centavos. He estado trabajando en la simulación de clics del mouse al usar este sitio: https://www.youtube.com/tv. Puedes abrir cualquier video e intentar ejecutar este código. Realiza el cambio al siguiente video.

function triggerEvent(el, type, keyCode) { 
    if ('createEvent' in document) { 
      // modern browsers, IE9+ 
      var e = document.createEvent('HTMLEvents'); 
      e.keyCode = keyCode; 
      e.initEvent(type, false, true); 
      el.dispatchEvent(e); 
    } else { 
     // IE 8 
     var e = document.createEventObject(); 
     e.keyCode = keyCode; 
     e.eventType = type; 
     el.fireEvent('on'+e.eventType, e); 
    } 
} 

var nextButton = document.getElementsByClassName('icon-player-next')[0]; 
triggerEvent(nextButton, 'keyup', 13); // simulate mouse/enter key press 

Answer 7

Usted puede lograr esto con: EventTarget.dispatchEvent(event) y al pasar en una nueva KeyboardEvent como el evento.

Por ejemplo: element.dispatchEvent(new KeyboardEvent('keypress', {'key': 'a'}))

Ejemplo de trabajo:

// get the element in question 
 
const input = document.getElementsByTagName("input")[0]; 
 

 
// focus on the input element 
 
input.focus(); 
 

 
// add event listeners to the input element 
 
input.addEventListener('keypress', (event) => { 
 
    console.log("You have pressed key: ", event.key); 
 
}); 
 

 
input.addEventListener('keydown', (event) => { 
 
    console.log(`key: ${event.key} has been pressed down`); 
 
}); 
 

 
input.addEventListener('keyup', (event) => { 
 
    console.log(`key: ${event.key} has been released`); 
 
}); 
 

 
// dispatch keyboard events 
 
input.dispatchEvent(new KeyboardEvent('keypress', {'key':'h'})); 
 
input.dispatchEvent(new KeyboardEvent('keydown', {'key':'e'})); 
 
input.dispatchEvent(new KeyboardEvent('keyup', {'key':'y'}));

<input type="text" placeholder="foo" />

MDN dispatchEvent

MDN KeyboardEvent