Вызвать событие нажатия клавиши / keydown/keyup в JS / jQuery?
каков наилучший способ имитации ввода текста Пользователем в текстовое поле ввода в JS и / или jQuery?
Я не хотите на самом деле поместить текст в поле ввода, я просто хочу вызвать все событие обработчики это обычно срабатывает при вводе пользователем информации в поле ввода. Это означает фокус, keydown, нажатие клавиши, keyup и размытие. Я думаю.
Так как же это сделать?
8 ответов
вы можете вызвать любое из событий с прямым вызовом к ним, например:
$(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: какая клавиша была нажата?, в частности, относительно кросс-браузерной совместимости с.какое свойство.
для начала enter нажатие клавиши, мне пришлось изменить ответ @ebynum, в частности, используя свойство keyCode.
e = $.Event('keyup');
e.keyCode= 13; // enter
$('input').trigger(e);
вы можете отправлять события, такие как
el.dispatchEvent(new Event('focus'));
el.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'}));
вот пример 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);
}
}
вы можете достичь этого с помощью: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" />
прежде всего, я должен сказать, что образец от 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
Я думал, что обращу ваше внимание, что в конкретном контексте, где слушатель был определен в плагине jQuery, тогда единственное, что успешно имитировало событие нажатия клавиши для меня, в конечном итоге пойманное этим слушателем, было использовать setTimeout(). например,
setTimeout(function() { $("#txtName").keypress() } , 1000);
использование $("#txtName").keypress()
был игнорировать, находясь в конце .ready() function
. В любом случае, никакое конкретное дополнение DOM не создавалось асинхронно.