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

IT技术 javascript jquery dom-events
2021-01-18 23:36:05

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

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

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

6个回答

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

$(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 属性的跨浏览器兼容性。

或者 $('item').trigger('keypress', {which: 'A'.charCodeAt(0)});
2021-03-13 23:36:05
键盘事件(typeArgKeyboardEventInit
2021-03-13 23:36:05
如果你需要 Ctrl: ctrlKey: true, 也: shiftKey,altKey
2021-03-26 23:36:05
@ebynum 你能用 Javascript 写一些代码吗(没有 jquery)。
2021-04-05 23:36:05

你可以调度事件,如

el.dispatchEvent(new Event('focus'));
el.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'}));
键盘事件(typeArgKeyboardEventInit
2021-03-12 23:36:05
@Cuzox 为什么不使用 KeyboardEvent?它会自动填充像 shiftKey 这样的值,这是正确的方法。另外,您在 keyCode 中放置了一个字符串,这是错误的。
2021-03-19 23:36:05
或者 el.dispatchEvent(new Event('keypress', {keyCode: 'a'}))
2021-03-20 23:36:05
如果您需要Ctrl:( el.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 70, ctrlKey: true }));这将导致快捷方式Ctrl + F
2021-03-25 23:36:05

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

e = $.Event('keyup');
e.keyCode= 13; // enter
$('input').trigger(e);
keydown事件没有被捕获,还是我在这里做错了什么?fiddle.jshell.net/巴勒斯坦/8d8J9
2021-03-13 23:36:05
@cloak:它有效。在此处查看我的评论以获取修复 asp.net 控件的完整选择器:codeproject.com/Tips/269388/...如果使用 Ajax,请确保在向 dom 中插入任何内容后调用它。
2021-03-17 23:36:05

这是一个触发任何事件的普通 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
2021-04-06 23:36:05
你能提供几个使用的例子吗?您的函数将如何用于发送键码?
2021-04-07 23:36:05

您可以通过以下方式实现: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 调度事件

MDN 键盘事件

代码片段在 Chrome 上不起作用 - 你知道为什么..吗?
2021-03-14 23:36:05