Czy wyzwolić zdarzenie keypress / keydown / keyup w JS / jQuery?

Jaki jest najlepszy sposób na symulowanie użytkownika wprowadzającego tekst w polu tekstowym w JS i / lub jQuery?

I nie chcą faktycznie umieścić tekst w polu tekstowym, po prostu chcę, aby wyzwolić wszystkich zdarzeń teleskopowe , które normalnie uruchamiane przez użytkownika informacji wpisując w polu tekstowym. Oznacza to ostrość, klawisz w dół, naciśnięcie klawisza, aktywację klawisza i rozmycie. Myślę.

Jak więc można to osiągnąć?

Możesz wywołać dowolne ze zdarzeń, dzwoniąc bezpośrednio do nich, na przykład:

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

Czy to robi to, co próbujesz zrobić?

Prawdopodobnie powinieneś również uruchomić .focus()i potencjalnie.change()

Jeśli chcesz wywoływać zdarzenia kluczowe za pomocą określonych kluczy, możesz to zrobić w następujący sposób:

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

Jest tu interesująca dyskusja na temat zdarzeń związanych z naciśnięciem klawisza: jQuery Event Keypress: Który klawisz został naciśnięty? , szczególnie w odniesieniu do zgodności między przeglądarkami z właściwością .which.

Możesz wysyłać zdarzenia, takie jak

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

Aby wywołać enternaciśnięcie klawisza, musiałem zmodyfikować odpowiedź @ebynum, w szczególności za pomocą właściwości keyCode.

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

Oto przykład vanilla js, który wyzwala dowolne zdarzenie:

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

Możesz to osiągnąć za pomocą: EventTarget.dispatchEvent(event)i przekazując nowe zdarzenie KeyboardEvent jako zdarzenie.

Na przykład: element.dispatchEvent(new KeyboardEvent('keypress', {'key': 'a'}))

Przykład pracy:

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

Możesz teraz:

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

Przede wszystkim muszę powiedzieć, że próbka z Sionnach733 działała bez zarzutu. Niektórzy użytkownicy narzekają na brak rzeczywistych przykładów. Oto moje dwa centy. Pracowałem nad symulacją kliknięcia myszą podczas korzystania z tej strony: https://www.youtube.com/tv . Możesz otworzyć dowolny film i spróbować uruchomić ten kod. Wykonuje przejście do następnego wideo.

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

Pomyślałem, że zwróciłbym twoją uwagę, że w konkretnym kontekście, w którym słuchacz został zdefiniowany we wtyczce jQuery, jedyną rzeczą, która pomyślnie zasymulowała dla mnie zdarzenie naciśnięcia klawisza, ostatecznie przechwycone przez tego słuchacza, było użycie setTimeout (). na przykład

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

Jakiekolwiek użycie znaku$("#txtName").keypress() zostało zignorowane , chociaż zostało umieszczone na końcu .ready() function. I tak żaden konkretny dodatek DOM nie był tworzony asynchronicznie.

W przypadku rzutowania skryptu na KeyboardEventInit i podaj poprawną liczbę całkowitą keyCode

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