在JS/jQuery中如何触发按键按下/按键弹起事件？

Question

如何在JS和/或jQuery中模拟用户输入文本的最佳方法？

我不想实际放置文本在输入框中，我只想触发所有事件处理程序，这些事件通常会由用户在输入框中键入信息而触发。这包括焦点、keydown、keypress、keyup和blur。 我想。

那么，如何完成这个过程？

- Alex

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

这里有一些关于keypress事件的有趣讨论：jQuery Event Keypress: Which key was pressed?，特别是与 .which 属性在跨浏览器兼容性方面的讨论。

- ebynum

---

或者 $('item').trigger('keypress', {which: 'A'.charCodeAt(0)}); 的意思是触发一个键盘按键事件，其中按下的键为大写字母 A。 - Bob Stein

@ebynum，你能用JavaScript（不用jQuery）写一些代码吗？ - Chris P

如果您需要 Ctrl：ctrlKey: true，还有：shiftKey，altKey。 - Илья Зеленько

KeyboardEvent(typeArg, KeyboardEventInit) - Joshua

Answer 2

您可以像这样分发事件：

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

- aljgom

---

或者 el.dispatchEvent(new Event('keypress', {keyCode: 'a'})) - cuzox

为什么不使用KeyboardEvent？它会自动填充shiftKey等值，这是正确的方式。另外，你在keyCode中放置了一个字符串，这是错误的。 - SuperOP535

如果你需要使用 Ctrl： el.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 70, ctrlKey: true })); （这将触发快捷键 Ctrl + F）。 - Илья Зеленько

KeyboardEvent(typeArg, KeyboardEventInit) - Joshua

Answer 3

为了触发按下 enter 键，我不得不修改 @ebynum 的回答，具体来说，使用 keyCode 属性。

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

- cloakedninjas

---

keydown事件没有被捕获，或者我在这里做错了什么吗？fiddle.jshell.net/Palestinian/8d8J9。 - Omar

@cloak: 它起作用了。查看我的评论，这里有一个完整选择器来修复asp.net控件：http://www.codeproject.com/Tips/269388/How-prevent-Textbox-postback-when-hit-enter-key-in?msg=5145046#xx5145046xx 如果使用Ajax，请确保在向dom插入任何内容之后调用它。 - Dan Randolph

Answer 4

你可以通过以下方式实现：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

- JSON C11

---

这段代码片段在Chrome上无法运行 - 你知道为什么吗？ - Michal Tsadok

Answer 5

这里有一个使用原生 JavaScript 触发任何事件的例子：

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

- Sionnach733

---

可以给出几个用法例子吗？使用您的功能如何发送按键代码？ - Mac

这篇文章的源代码和文档可以在以下链接中找到：https://plainjs.com/javascript/events/trigger-an-event-11/ - Kieren Dixon

Answer 6

你现在可以做到：

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

- simonzack

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

- yuliskov

Answer 8

对于 TypeScript，将其转换为 KeyboardEventInit 类型并提供正确的 keyCode 整数。

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

- EugenSunic

---

对象与接口不匹配。 - Florian Leitgeb

Answer 9

我想提醒您，在jQuery插件中定义了一个监听器的特定情况下，唯一能够成功模拟按键事件并被该监听器捕获的方法是使用setTimeout()。

例如：

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

任何对$("#txtName").keypress()的使用都被忽略了，即使它被放置在.ready()函数的末尾。无论如何也没有创建特定的DOM补充程序。

- Fabien Haddadi