Attiva un evento keypress / keydown / keyup in JS / jQuery?

Qual è il modo migliore per simulare un utente che immette il testo in una casella di immissione testo in JS e / o jQuery?

Non voglio mettere effettivamente del testo nella casella di input, voglio solo triggersre tutti i gestori di eventi che normalmente vengono triggersti ​​da un utente che digita informazioni in una casella di input. Questo significa focus, keydown, keypress, keyup e blur. Credo.

Quindi, come si compirebbe questo?

Puoi triggersre uno qualsiasi degli eventi con una chiamata diretta, in questo modo:

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

Fa quello che stai cercando di fare?

Probabilmente dovresti anche triggersre .focus() e potenzialmente .change()

Se vuoi triggersre gli eventi chiave con chiavi specifiche, puoi farlo in questo modo:

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

C’è qualche discussione interessante sugli eventi keypress qui: jQuery Event Keypress: quale tasto è stato premuto? , in particolare per quanto riguarda la compatibilità cross-browser con la proprietà .which.

Per triggersre un tasto Invio , ho dovuto modificare la risposta @ebynum, in particolare, usando la proprietà keyCode.

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

Potresti inviare eventi come

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

Ecco un esempio di vanilla js per triggersre qualsiasi evento:

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

Ora sei in grado di fare:

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

È ansible ottenere ciò con: EventTarget.dispatchEvent(event) e passando un nuovo KeyboardEvent come evento.

Ad esempio: element.dispatchEvent(new KeyboardEvent('keypress', {'key': 'a'}))

Esempio di lavoro:

 // 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'})); 
  

Prima di tutto, devo dire che il campione di Sionnach733 ha funzionato perfettamente. Alcuni utenti si lamentano dell’assenza di esempi reali. Ecco i miei due centesimi. Ho lavorato alla simulazione del mouse quando si utilizza questo sito: https://www.youtube.com/tv . Puoi aprire qualsiasi video e provare a eseguire questo codice. Esegue il passaggio al prossimo 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 

Ho pensato che avrei attirato la tua attenzione sul fatto che nello specifico contesto in cui un listener era definito all’interno di un plugin jQuery, l’unica cosa che simulava con successo l’evento keypress per me, alla fine catturato da quel listener, era usare setTimeout (). per esempio

 setTimeout(function() { $("#txtName").keypress() } , 1000); 

Qualsiasi utilizzo di $("#txtName").keypress() stato ignorato , anche se collocato alla fine della .ready() function . Nessun particolare complemento DOM è stato creato in modo asincrono in ogni caso.