Déclencher un événement keypress / keydown / keyup dans JS / jQuery?
Quelle est la meilleure façon de simuler un utilisateur entrant du texte dans une zone de saisie de texte dans JS et/ou jQuery?
I dont vous voulez réellement mettre du texte dans la boîte de saisie, je veux juste déclencher tout l'événement handlers qui serait normalement déclenché par un utilisateur tapant des informations dans une boîte de saisie. Cela signifie concentration, keydown, keypress, keyup, et flou. Je pense que.
alors comment accomplir cela?
8 réponses
vous pouvez déclencher n'importe lequel des événements avec un appel direct à eux, comme ceci:
$(function() {
$('item').keydown();
$('item').keypress();
$('item').keyup();
$('item').blur();
});
est-ce que ça fait ce que tu essaies de faire?
vous devriez probablement aussi déclencher .focus() et potentiellement .change()
si vous voulez déclencher les événements clés avec des clés spécifiques, vous pouvez le faire comme ceci:
$(function() {
var e = $.Event('keypress');
e.which = 65; // Character 'A'
$('item').trigger(e);
});
Il ya une discussion intéressante sur les événements de keypress ici: jQuery Event Keypress: quelle touche a été pressée? , en particulier en ce qui concerne la compatibilité avec le .quelle propriété.
pour déclencher un entrer keypress, j'ai dû modifier la réponse @ebynum, spécifiquement, en utilisant la propriété keyCode.
e = $.Event('keyup');
e.keyCode= 13; // enter
$('input').trigger(e);
vous pourriez envoyer des événements comme
el.dispatchEvent(new Event('focus'));
el.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'}));
voici un exemple vanilla js pour déclencher n'importe quel événement:
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);
}
}
maintenant, Vous êtes en mesure de le faire:
var e = $.Event("keydown", {keyCode: 64});
Vous pouvez atteindre cet objectif: EventTarget.dispatchEvent(event) et en passant dans une nouvelle KeyboardEvent l'événement.
par exemple: element.dispatchEvent(new KeyboardEvent('keypress', {'key': 'a'}))
exemple pratique:
// 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" />tout d'abord, je dois dire que l'échantillon de Sionnach733 fonctionne parfaitement. Certains utilisateurs se plaignent de l'absence d'exemples concrets. Voici mes deux cents. J'ai travaillé sur la simulation de clic de souris en utilisant ce site: https://www.youtube.com/tv . Vous pouvez ouvrir n'importe quelle vidéo et essayez d'exécuter ce code. Il effectue le commutateur à la vidéo suivante.
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
j'ai pensé attirer votre attention sur le fait que dans le contexte spécifique où un listener était défini dans un plugin jQuery, alors la seule chose qui a simulé avec succès l'événement keypress pour moi, éventuellement attrapé par ce listener, était d'utiliser setTimeout(). par exemple
setTimeout(function() { $("#txtName").keypress() } , 1000);
toute utilisation de $("#txtName").keypress() était ignorée , bien que placée à la fin du .ready() function . Aucun supplément DOM particulier N'a été créé de façon asynchrone. de toute façon.