关于javascript：在JS / jQuery中触发keypress / keydown / keyup事件吗？


Trigger a keypress/keydown/keyup event in JS/jQuery?

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

我不想在输入框中实际输入文本，我只想触发所有通常由用户在输入框中输入信息触发的事件处理程序。 这意味着聚焦，按下键，按下键，按下键和模糊。 我认为。

那么，一个人如何做到这一点呢？

您可以通过直接调用事件来触发任何事件，如下所示：

1
2
3
4
5
6
$(function() {
    $('item').keydown();
    $('item').keypress();
    $('item').keyup();
    $('item').blur();
});

那会做你想做的事吗？

您可能还应该触发.focus()并可能触发.change()

如果要使用特定键触发键事件，可以这样进行：

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

这里有一些有关按键事件的有趣讨论：jQuery Event Keypress：按下了哪个键？特别是关于跨浏览器与.that属性的兼容性。

相关讨论

您可以调度类似的事件

1
2
el.dispatchEvent(new Event('focus'));
el.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'}));
相关讨论

要触发enter按键，我必须修改@ebynum响应，特别是使用keyCode属性。

1
2
3
e = $.Event('keyup');
e.keyCode= 13; // enter
$('input').trigger(e);
相关讨论

这是一个触发任何事件的普通js示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
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);
    }
}
相关讨论

您现在可以执行以下操作：

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

您可以使用EventTarget.dispatchEvent(event)并通过传入新的KeyboardEvent作为事件来实现。

例如：element.dispatchEvent(new KeyboardEvent('keypress', {'key': 'a'}))

工作示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 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'}));
1
<input type="text" placeholder="foo" />

MDN dispatchEvent

MDN KeyboardEvent

首先，我要说的是Sionnach733的样本工作完美。一些用户抱怨缺少实际示例。这是我的两分钱。使用此网站时，我一直在进行鼠标点击模拟：https：//www.youtube.com/tv。您可以打开任何视频，然后尝试运行此代码。它执行切换到下一个视频。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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

对于打字稿强制转换为KeyboardEventInit并提供正确的keyCode整数

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

我想我会引起您的注意，在jQuery插件中定义了侦听器的特定上下文中，唯一成功地为我模拟了keypress事件并最终被该侦听器捕获的事情是使用setTimeout()。
例如

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

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