Kích hoạt một sự kiện nhấn phím / nhấn phím / gõ phím trong JS / jQuery?

Cách tốt nhất để mô phỏng người dùng nhập văn bản vào hộp nhập văn bản trong JS và / hoặc jQuery là gì?

Tôi không thực sự muốn đặt văn bản vào hộp nhập, tôi chỉ muốn kích hoạt tất cả các trình xử lý sự kiện thường được kích hoạt bởi người dùng nhập thông tin vào hộp nhập. Điều này có nghĩa là tập trung, nhấn phím, nhấn phím, gõ phím và làm mờ. Tôi nghĩ.

Vì vậy, làm thế nào một người sẽ thực hiện điều này?

Bạn có thể kích hoạt bất kỳ sự kiện nào bằng một cuộc gọi trực tiếp đến họ, như thế này:

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

Điều đó có làm những gì bạn đang cố gắng làm không?

Có lẽ bạn cũng nên kích hoạt .focus()và có khả năng.change()

Nếu bạn muốn kích hoạt các sự kiện khóa bằng các phím cụ thể, bạn có thể làm như vậy:

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

Có một số cuộc thảo luận thú vị về các sự kiện nhấn phím ở đây: Phím bấm sự kiện jQuery: Phím nào được nhấn? , đặc biệt liên quan đến khả năng tương thích giữa nhiều trình duyệt với thuộc tính .which.

Bạn có thể gửi các sự kiện như

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

Để kích hoạt enterphím nhấn, tôi phải sửa đổi phản hồi @ebynum, cụ thể bằng cách sử dụng thuộc tính keyCode.

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

Đây là một ví dụ vanilla js để kích hoạt bất kỳ sự kiện nào:

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

Bạn có thể đạt được điều này với: EventTarget.dispatchEvent(event)và bằng cách chuyển vào Bàn phím mới như là sự kiện.

Ví dụ: element.dispatchEvent(new KeyboardEvent('keypress', {'key': 'a'}))

Ví dụ làm việc:

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

Công văn MDN

Bàn phím MDNEvent

Bây giờ bạn có thể làm:

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

Trước hết, tôi cần phải nói rằng mẫu từ Sionnach733 hoạt động hoàn hảo. Một số người dùng phàn nàn về sự vắng mặt của các ví dụ thực tế. Đây là hai xu của tôi. Tôi đã làm việc trên mô phỏng nhấp chuột khi sử dụng trang web này: https://www.youtube.com/tv . Bạn có thể mở bất kỳ video nào và thử chạy mã này. Nó thực hiện chuyển sang video tiếp theo.

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

Tôi nghĩ rằng tôi sẽ thu hút sự chú ý của bạn rằng trong ngữ cảnh cụ thể nơi người nghe được xác định trong plugin jQuery, thì điều duy nhất mô phỏng thành công sự kiện nhấn phím cho tôi, cuối cùng bị người nghe đó bắt gặp, là sử dụng setTimeout (). ví dụ

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

Bất kỳ việc sử dụng $("#txtName").keypress()đã bị bỏ qua , mặc dù được đặt ở cuối .ready() function. Không có bổ sung DOM cụ thể nào được tạo không đồng bộ.

Đối với bản thảo được truyền tới KeyboardEventInit và cung cấp số nguyên keyCode chính xác

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