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

Question

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

我不想真正将文本放入输入框中，我只想触发通常由用户输入信息触发的所有事件 handlers进入一个输入框。这意味着焦点、keydown、keypress、keyup 和模糊。我想。

那么如何做到这一点呢？

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 key was pressed?，特别是关于与 .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

这是一个触发任何事件的普通 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

您可以使用：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

Answer 6

你现在可以做：

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

Answer 7

首先，我需要说的是 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

Answer 8

我想我会提请您注意，在 jQuery 插件中定义侦听器的特定上下文中，唯一为我成功模拟按键事件并最终被该侦听器捕获的方法是使用 setTimeout() . 例如

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

$("#txtName").keypress() 的任何使用都被忽略，尽管放在.ready() function 的末尾。无论如何，都没有异步创建特定的 DOM 补充。

Answer 9

对于 typescript 转换为 KeyboardEventInit 并提供正确的 keyCode 整数

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