模拟用户在 JS 和/或 jQuery 的文本输入框中输入文本的最佳方法是什么?
我不希望居然把文本输入框,我只是想触发所有的事件处理程序,通常会得到用户输入信息到一个输入框触发。这意味着焦点、keydown、keypress、keyup 和模糊。我认为。
那么如何实现这一目标呢?
模拟用户在 JS 和/或 jQuery 的文本输入框中输入文本的最佳方法是什么?
我不希望居然把文本输入框,我只是想触发所有的事件处理程序,通常会得到用户输入信息到一个输入框触发。这意味着焦点、keydown、keypress、keyup 和模糊。我认为。
那么如何实现这一目标呢?
您可以通过直接调用它们来触发任何事件,如下所示:
$(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 属性的跨浏览器兼容性。
你可以调度事件,如
el.dispatchEvent(new Event('focus'));
el.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'}));
要触发enter按键,我必须修改 @ebynum 响应,特别是使用 keyCode 属性。
e = $.Event('keyup');
e.keyCode= 13; // enter
$('input').trigger(e);
这是一个触发任何事件的普通 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);
}
}
您可以通过以下方式实现: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" />