ทริกเกอร์เหตุการณ์ keypress / keydown / keyup ใน JS / jQuery หรือไม่

วิธีที่ดีที่สุดในการจำลองผู้ใช้ที่ป้อนข้อความในกล่องป้อนข้อความใน JS และ / หรือ jQuery คืออะไร?

ฉันไม่ต้องการใส่ข้อความลงในกล่องป้อนข้อมูลฉันเพียงต้องการทริกเกอร์ตัวจัดการเหตุการณ์ทั้งหมดที่ปกติแล้วจะถูกทริกเกอร์โดยผู้ใช้พิมพ์ข้อมูลลงในกล่องป้อนข้อมูล ซึ่งหมายถึงโฟกัส, การกดคีย์, การกดปุ่ม, การกดปุ่มและเบลอ ฉันคิด.

ดังนั้นหนึ่งจะสำเร็จสิ่งนี้ได้อย่างไร

คุณสามารถเรียกใช้เหตุการณ์ใด ๆ ด้วยการโทรโดยตรงถึงพวกเขาเช่นนี้:

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

สิ่งนั้นกำลังทำสิ่งที่คุณพยายามทำหรือไม่?

คุณควรจะกระตุ้น.focus()และอาจ.change()

หากคุณต้องการทริกเกอร์เหตุการณ์สำคัญด้วยปุ่มเฉพาะคุณสามารถทำได้ดังนี้:

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

มีการสนทนาที่น่าสนใจเกี่ยวกับกิจกรรมการกดปุ่มที่นี่: jQuery Event Keypress: การกดแป้นใด โดยเฉพาะเกี่ยวกับความเข้ากันได้ข้ามเบราว์เซอร์กับคุณสมบัติ. ซึ่ง

คุณสามารถจัดส่งกิจกรรมเช่น

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

ในการทริกเกอร์การenterกดแป้นฉันต้องแก้ไข @ebynum response โดยเฉพาะโดยใช้คุณสมบัติ keyCode

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

นี่คือตัวอย่างของวานิลลา js เพื่อทริกเกอร์เหตุการณ์ใด ๆ :

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

คุณสามารถบรรลุสิ่งนี้ด้วย: EventTarget.dispatchEvent(event)และโดยการส่งผ่าน KeyboardEvent ใหม่เป็นเหตุการณ์

ตัวอย่างเช่น: element.dispatchEvent(new KeyboardEvent('keypress', {'key': 'a'}))

ตัวอย่างการทำงาน:

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

ตอนนี้คุณสามารถทำได้:

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

ก่อนอื่นฉันต้องบอกว่าตัวอย่างจากSionnach733ทำงานได้อย่างไร้ที่ติ ผู้ใช้บางคนบ่นว่าไม่มีตัวอย่างจริง นี่คือสองเซ็นต์ของฉัน ฉันได้รับการทำงานในการคลิกเมาส์จำลองเมื่อใช้ไซต์นี้: https://www.youtube.com/tv คุณสามารถเปิดวิดีโอใด ๆ และลองเรียกใช้รหัสนี้ จะทำการสลับไปยังวิดีโอถัดไป

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

ฉันคิดว่าฉันจะดึงความสนใจของคุณว่าในบริบทเฉพาะที่ผู้ฟังกำหนดไว้ในปลั๊กอิน jQuery จากนั้นสิ่งเดียวที่ประสบความสำเร็จในการจำลองเหตุการณ์ปุ่มกดสำหรับฉัน เช่น

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

การใช้ใด ๆ ที่$("#txtName").keypress()ได้รับการละเว้น.ready() functionแม้จะวางไว้ที่ท้ายของ ยังไม่มีการสร้างส่วนเสริม DOM เฉพาะแบบอะซิงโครนัส

สำหรับการโยน typescript ไปยัง KeyboardEventInit และระบุจำนวนเต็ม keyCode ที่ถูกต้อง

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