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

173

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?

Alex
quelle

Antworten:

240

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.

ebynum
quelle
3
oder$('item').trigger('keypress', {which: 'A'.charCodeAt(0)});
Bob Stein
@ebynum Kannst du Code mit Javascript schreiben (keine Abfrage)?
Chris P
1
Wenn Sie Strg benötigen : ctrlKey: true, auch : shiftKey,altKey
Илья Зеленько
52

Sie könnten Ereignisse wie z

el.dispatchEvent(new Event('focus'));
el.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'}));
aljgom
quelle
5
oderel.dispatchEvent(new Event('keypress', {keyCode: 'a'}))
Cuzox
1
@Cuzox warum nicht KeyboardEvent verwenden? Es füllt Werte wie shiftKey automatisch aus und ist der richtige Weg. Außerdem haben Sie eine Zeichenfolge in keyCode eingefügt, was falsch ist.
SuperOP535
7
Wenn Sie brauchen Ctrl: el.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 70, ctrlKey: true }));(Dies wird eine Verknüpfung verursachen Ctrl + F)
Илья Зеленько
31

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);
Cloakedninjas
quelle
2
keydownEreignis wird nicht gefangen, oder mache ich hier etwas falsch? fiddle.jshell.net/Palestinian/8d8J9
Omar
@ Umhang: es funktioniert. Überprüfen Sie meinen Kommentar hier auf eine vollständige Auswahl zum Korrigieren von asp.net-Steuerelementen: codeproject.com/Tips/269388/… Stellen Sie sicher, dass Sie ihn aufrufen, nachdem Sie etwas in den Dom eingefügt haben , wenn Sie Ajax verwenden.
Dan Randolph
23

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);
    }
}
Sionnach733
quelle
7
Können Sie einige Anwendungsbeispiele liefern? Wie würde Ihre Funktion zum Senden eines Schlüsselcodes verwendet?
Mac
6
Der Quellcode für diesen Beitrag kann unter dem folgenden Link gefunden werden, der Dokumentation enthält: plainjs.com/javascript/events/trigger-an-event-11
Kieren Dixon
17

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

JSON C11
quelle
12

Sie können jetzt Folgendes tun:

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

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
Yuliskov
quelle
1

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.

Fabien Haddadi
quelle
1

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

const event = new KeyboardEvent("keydown", {
          keyCode: 38,
        } as KeyboardEventInit);
Eugen Sunic
quelle
1
@CamiRodriguez Was auch immer Sie in TypeScript tun können, können Sie in JS tun (genau wie jQuery). Abgesehen davon, dass TypeScript die JS-Syntax nicht durcheinander bringt, sondern nur erweitert. Wenn Sie `as KeyboardEventInit` entfernen, handelt es sich im Grunde genommen um einen JS-Code. +1 für die Antwort, danke.
Gergő Horváth