在JS/jQuery中触发keypress/keydown/keyup事件？

Question

模拟用户在JS和/或jQuery的文本输入框中输入文本的最佳方法是什么？

我不希望居然把文本输入框,我只是想触发所有的事件处理程序,通常会得到用户输入信息到一个输入框触发.这意味着焦点,keydown,按键,键盘和模糊.我认为.

那么如何实现这一目标呢？

Answer 1

您可以通过直接调用它们来触发任何事件,如下所示:

$(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:按下了哪个键？,特别是关于与.which属性的跨浏览器兼容性.

Answer 2

你可以调度像这样的事件

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

Answer 3

要触发enter按键,我必须修改@ebynum响应,具体来说,使用keyCode属性.

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

Answer 4

这是一个触发任何事件的vanilla 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);
    }
}

Answer 5

你现在能够做到:

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

Answer 6

您可以使用以下方法实现此目的：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