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

Posted

技术标签:

【中文标题】在 JS/jQuery 中触发 keypress/keydown/keyup 事件?【英文标题】:Trigger a keypress/keydown/keyup event in JS/jQuery? 【发布时间】:2011-03-23 01:35:56 【问题描述】:

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

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

那么如何做到这一点呢?

【问题讨论】:

【参考方案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 属性的跨浏览器兼容性。

【讨论】:

$('item').trigger('keypress', which: 'A'.charCodeAt(0)); @ebynum 你能用javascript写一些代码吗(没有jquery)。 如果需要Ctrl:ctrlKey: true,也可以:shiftKeyaltKey KeyboardEvent(typeArg, KeyboardEventInit)【参考方案2】:

你可以调度像

这样的事件
el.dispatchEvent(new Event('focus'));
el.dispatchEvent(new KeyboardEvent('keypress','key':'a'));

【讨论】:

el.dispatchEvent(new Event('keypress', keyCode: 'a')) @Cuzox 为什么不使用键盘事件?它会自动填充 shiftKey 之类的值,这是正确的方法。另外,你在keyCode中放了一个字符串,这是错误的。 如果你需要Ctrlel.dispatchEvent(new KeyboardEvent('keydown', keyCode: 70, ctrlKey: true ));(这会导致一个快捷方式Ctrl + F KeyboardEvent(typeArg, KeyboardEventInit)【参考方案3】:

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

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

【讨论】:

keydown 事件没有被捕获,或者我在这里做错了什么? fiddle.jshell.net/Palestinian/8d8J9 @cloak:它有效。在此处查看我的评论以获取修复 asp.net 控件的完整选择器:codeproject.com/Tips/269388/… 如果使用 Ajax,请确保在 dom 中插入任何内容后调用它。【参考方案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);
    

【讨论】:

你能提供几个使用例子吗?您的函数将如何用于发送密钥代码? 这篇文章的源代码可以在以下链接中找到,其中包括文档:plainjs.com/javascript/events/trigger-an-event-11【参考方案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

【讨论】:

代码 sn-p 在 Chrome 上不起作用 - 你知道为什么..?【参考方案6】:

你现在可以做:

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

【讨论】:

【参考方案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

【讨论】:

【参考方案8】:

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

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

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

【讨论】:

【参考方案9】:

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

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

【讨论】:

对象与接口不匹配

以上是关于在 JS/jQuery 中触发 keypress/keydown/keyup 事件?的主要内容,如果未能解决你的问题,请参考以下文章

VB keypress事件中键盘上每个键的KeyAscii值分别是啥?

如何在 IE 中为按钮事件触发 Keypress 事件

keypress keydownkeyup后触发回车

keyPress事件未在Android手机中触发

TextBox KeyPress事件不会触发

在 angular bootstrap ui typeahead 指令上触发 keypress 事件