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

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

In realtà non voglio inserire del testo nella casella di input, voglio solo attivare tutti i gestori di eventi che normalmente verrebbero attivati ​​da un utente che digita le informazioni in una casella di input. Ciò significa messa a fuoco, keydown, keypress, keyup e sfocatura. Penso.

Quindi come si potrebbe ottenere questo?

Puoi attivare uno qualsiasi degli eventi con una chiamata diretta a questi, in questo modo:

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

Fa quello che stai cercando di fare?

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

Se vuoi attivare 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à tra browser con la proprietà .which.

Potresti inviare eventi come

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

Per attivare un entertasto premuto, ho dovuto modificare la risposta @ebynum, in particolare, usando la proprietà keyCode.

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

Ecco un esempio di vaniglia js per attivare 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);
    }
}

Puoi farlo con: EventTarget.dispatchEvent(event)e passando un nuovo KeyboardEvent come evento.

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

Esempio funzionante:

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

Ora puoi fare:

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

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 sulla simulazione del clic del mouse durante l'utilizzo di questo sito: https://www.youtube.com/tv . Puoi aprire qualsiasi video e provare a eseguire questo codice. Esegue il passaggio al video successivo.

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 di attirare la tua attenzione sul fatto che nel contesto specifico 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 uso di è $("#txtName").keypress()stato ignorato , sebbene collocato alla fine del .ready() function. In ogni caso non è stato creato alcun supplemento DOM specifico in modo asincrono.

Per il cast dattiloscritto su KeyboardEventInit e fornire il numero intero keyCode corretto

const event = new KeyboardEvent("keydown", {
          keyCode: 38,
        } as KeyboardEventInit);