Memicu penekanan tombol / keydown / keyup acara di JS / jQuery?

Apa cara terbaik untuk mensimulasikan pengguna memasukkan teks dalam kotak input teks di JS dan / atau jQuery?

Saya tidak ingin benar-benar memasukkan teks ke dalam kotak input, saya hanya ingin memicu semua penangan acara yang biasanya dipicu oleh pengguna mengetik info ke dalam kotak input. Ini berarti fokus, keydown, penekanan tombol, keyup, dan blur. Kupikir.

Jadi bagaimana seseorang mencapai ini?

Anda dapat memicu salah satu acara dengan panggilan langsung ke mereka, seperti ini:

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

Apakah itu melakukan apa yang Anda coba lakukan?

Anda mungkin juga harus memicu .focus()dan berpotensi.change()

Jika Anda ingin memicu peristiwa-kunci dengan kunci tertentu, Anda dapat melakukannya seperti ini:

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

Ada beberapa diskusi menarik tentang acara penekanan tombol di sini: jQuery Event Keypress: Tombol mana yang ditekan? , khususnya tentang kompatibilitas lintas-browser dengan properti .which.

Anda dapat mengirim acara seperti

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

Untuk memicu enterpenekanan tombol, saya harus memodifikasi respons @ebynum, khususnya, menggunakan properti keyCode.

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

Berikut ini adalah contoh vanilla untuk memicu peristiwa apa pun:

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

Anda dapat mencapai ini dengan: EventTarget.dispatchEvent(event)dan dengan mengirimkan KeyboardEvent baru sebagai acara.

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

Contoh kerja:

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

Keyboard MDN

Anda sekarang dapat melakukan:

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

Pertama-tama, saya perlu mengatakan bahwa sampel dari Sionnach733 bekerja dengan sempurna. Beberapa pengguna mengeluh tentang tidak adanya contoh nyata. Ini dua sen saya. Saya telah mengerjakan simulasi klik mouse saat menggunakan situs ini: https://www.youtube.com/tv . Anda dapat membuka video apa saja dan mencoba menjalankan kode ini. Itu melakukan beralih ke video berikutnya.

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

Saya pikir saya akan menarik perhatian Anda bahwa dalam konteks spesifik di mana pendengar didefinisikan dalam plugin jQuery, maka satu-satunya hal yang berhasil mensimulasikan peristiwa penekanan tombol untuk saya, yang akhirnya ditangkap oleh pendengar itu, adalah menggunakan setTimeout (). misalnya

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

Setiap penggunaan $("#txtName").keypress() itu diabaikan , meskipun ditempatkan di akhir .ready() function. Lagipula tidak ada suplemen DOM tertentu yang dibuat secara sinkron.

Untuk naskah ketik dilemparkan ke KeyboardEventInit dan berikan integer keyCode yang benar

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