用JS和/或jQuery模拟用户在文本输入框中输入文本的最佳方法是什么?
我不想在输入框中实际放入文本,我只想触发通常由用户在输入框中输入信息而触发的所有事件处理程序。这意味着对焦、按下键、按下键、按上键和模糊。我认为。
那么如何才能做到呢?
用JS和/或jQuery模拟用户在文本输入框中输入文本的最佳方法是什么?
我不想在输入框中实际放入文本,我只想触发通常由用户在输入框中输入信息而触发的所有事件处理程序。这意味着对焦、按下键、按下键、按上键和模糊。我认为。
那么如何才能做到呢?
当前回答
我想我应该引起您的注意,在jQuery插件中定义侦听器的特定上下文中,那么唯一为我成功模拟按键事件(最终被侦听器捕获)的是使用setTimeout()。 如。
setTimeout(function() { $("#txtName").keypress() } , 1000);
$("#txtName").keypress()的任何使用都会被忽略,尽管它被放置在.ready()函数的末尾。无论如何,没有异步创建特定的DOM补充。
其他回答
下面是一个触发任何事件的例子:
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);
}
}
你可以通过: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
你可以调度事件
el.dispatchEvent(new Event('focus'));
el.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'}));
你现在可以做:
var e = $.Event("keydown", {keyCode: 64});
我想我应该引起您的注意,在jQuery插件中定义侦听器的特定上下文中,那么唯一为我成功模拟按键事件(最终被侦听器捕获)的是使用setTimeout()。 如。
setTimeout(function() { $("#txtName").keypress() } , 1000);
$("#txtName").keypress()的任何使用都会被忽略,尽管它被放置在.ready()函数的末尾。无论如何,没有异步创建特定的DOM补充。