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

Question

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

ho poteva vogliono mettere in realtà il testo nella casella di input, voglio solo far scattare tutto l'evento gestori che normalmente vengono attivati ​​da un utente digitando informazioni in una casella di input. Questo significa focus, keydown, keypress, keyup e blur. Credo.

Quindi, come si compirebbe questo?

Answer 1

È possibile attivare uno degli eventi con una chiamata diretta a loro, in questo modo:

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

Vuol fare quello che stai cercando di fare?

Probabilmente si dovrebbe anche innescare .focus() e potenzialmente .change()

Se si desidera attivare il Key-eventi con tasti specifici, è possibile farlo in questo modo:

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

C'è qualche interessante discussione gli eventi keypress qui: jQuery Event Keypress: Which key was pressed?, in particolare per quanto riguarda la compatibilità cross-browser con la proprietà .which.

Answer 2

Per attivare un immettere pressione dei tasti, ho dovuto modificare la risposta @ebynum, in particolare, utilizzando la proprietà keyCode.

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

Answer 3

Ora sei in grado di fare:

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

Answer 4

Ecco ad esempio una vaniglia js per attivare ogni caso: gli eventi

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

Si potrebbe dispacciamento come

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

Answer 6

Prima di tutto, devo dire che campione da Sionnach733 ha funzionato perfettamente. Alcuni utenti si lamentano dell'assenza di esempi reali. Ecco i miei due centesimi. Ho lavorato su 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 

Answer 7

È possibile raggiungere questo obiettivo con: EventTarget.dispatchEvent(event) e passando in una nuova KeyboardEvent come l'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'}));

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

MDN dispatchEvent

MDN KeyboardEvent