Auslösen eines Keypress / Keydown / Keyup-Ereignisses in JS / jQuery?

Was ist der beste Weg, um einen Benutzer zu simulieren, der Text in ein Texteingabefeld in JS und / oder jQuery eingibt?

Ich nicht möchte eigentlich Text in das Eingabefeld setzen, ich möchte nur alle das Ereignis auslösen Handler , die normalerweise von einem Benutzer die Eingabe info in einem Eingabefeld bekommen ausgelöst würde. Dies bedeutet Fokus, Tastendruck, Tastendruck, Tastendruck und Unschärfe. Meiner Ansicht nach.

Wie würde man das erreichen?

Sie können jedes der Ereignisse mit einem direkten Aufruf auslösen, wie folgt:

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

Tut das, was Sie versuchen zu tun?

Sie sollten wahrscheinlich auch auslösen .focus()und möglicherweise.change()

Wenn Sie die Schlüsselereignisse mit bestimmten Schlüsseln auslösen möchten, können Sie dies folgendermaßen tun:

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

Hier gibt es einige interessante Diskussionen zu den Tastendruckereignissen: jQuery Event Tastendruck: Welche Taste wurde gedrückt? , insbesondere in Bezug auf die browserübergreifende Kompatibilität mit der Eigenschaft .which.

Sie könnten Ereignisse wie z

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

Um einen enterTastendruck auszulösen , musste ich die Antwort von @ebynum speziell mithilfe der Eigenschaft keyCode ändern.

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

Hier ist ein Beispiel für Vanille js, um ein Ereignis auszulösen:

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

Sie können dies erreichen mit: EventTarget.dispatchEvent(event)und indem Sie ein neues KeyboardEvent als Ereignis übergeben.

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

Arbeitsbeispiel:

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

Sie können jetzt Folgendes tun:

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

Zunächst muss ich sagen, dass das Sample von Sionnach733 einwandfrei funktioniert hat. Einige Benutzer beschweren sich über das Fehlen tatsächlicher Beispiele. Hier sind meine zwei Cent. Ich habe an der Mausklicksimulation gearbeitet, als ich diese Website verwendet habe: https://www.youtube.com/tv . Sie können jedes Video öffnen und versuchen, diesen Code auszuführen. Es wird zum nächsten Video gewechselt.

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

Ich dachte, ich würde Ihre Aufmerksamkeit darauf lenken, dass in dem spezifischen Kontext, in dem ein Listener in einem jQuery-Plugin definiert wurde, das einzige Ereignis, das das Tastendruckereignis für mich erfolgreich simulierte und schließlich von diesem Listener abgefangen wurde, die Verwendung von setTimeout () war. z.B

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

Jede Verwendung von $("#txtName").keypress()wurde ignoriert , obwohl am Ende des platziert .ready() function. Es wurde ohnehin keine bestimmte DOM-Ergänzung asynchron erstellt.

Für Typoskript in KeyboardEventInit umwandeln und die richtige keyCode-Ganzzahl angeben

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