代码之家 › 专栏 › 技术社区 › Alex

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

jquery javascript-events javascript

159

Alex · 技术社区 · 14 年前

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

不要 处理程序 这通常是由用户在输入框中输入信息触发的。这意味着聚焦、向下键、按下键、向上键和模糊。我想。

那么如何才能做到这一点呢?

8 回复 | 直到 5 年前

250

Community CDub 7 年前

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

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

aljgom Miles 8 年前

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

cloakedninjas 9 年前

触发 进入 keypress,我必须修改@ebynum响应,特别是使用keyCode属性。

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

Sionnach733 8 年前

下面是一个触发任何事件的vanilla 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);
    }
}

JSON C11 Pardha Saradhi Survi 7 年前

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

simonzack 10 年前

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

yuliskov 7 年前

首先,我要说的是 辛纳奇733 工作完美无瑕。一些用户抱怨缺少实例。这是我的两分钱。使用此网站时,我一直在进行鼠标点击模拟: 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

EugenSunic 5 年前

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

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

Fabien Haddadi 6 年前

我想我会引起您的注意,在jQuery插件中定义了一个监听器的特定上下文中,唯一能成功模拟keypress事件(最终被该监听器捕获)的就是使用setTimeout()。

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

任何使用 $("#txtName").keypress() 是忽略 .ready() function . 无论如何,没有异步创建特定的DOM补充。