Déclencher un événement keypress/keydown/keyup en JS/jQuery ?

Question

Quelle est la meilleure façon de simuler un utilisateur qui saisit du texte dans une zone de saisie en JS et/ou jQuery ?

I dont je veux mettre du texte dans la boîte de saisie, je veux juste déclencher tous les événements manipulateurs qui serait normalement déclenché par un utilisateur tapant des informations dans un champ de saisie. C'est-à-dire le focus, le keydown, le keypress, le keyup et le blur. Je pense.

Alors comment faire ?

Merci !

Answer 1

Vous pouvez déclencher n'importe lequel de ces événements en les appelant directement, comme ceci :

$(function() {
    $('item').keydown();
    $('item').keypress();
    $('item').keyup();
    $('item').blur();
});

Est-ce que ça fait ce que vous essayez de faire ?

Vous devriez probablement aussi déclencher .focus() et potentiellement .change()

Si vous voulez déclencher les événements de touche avec des touches spécifiques, vous pouvez le faire comme suit :

$(function() {
    var e = $.Event('keypress');
    e.which = 65; // Character 'A'
    $('item').trigger(e);
});

Il y a une discussion intéressante sur les événements liés à la pression des touches ici : jQuery Event Keypress : Quelle touche a été pressée ? en particulier en ce qui concerne la compatibilité entre navigateurs avec la propriété .which.

Answer 2

Vous pourriez envoyer des événements comme

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

Answer 3

Pour déclencher une pression sur une touche, j'ai dû modifier la réponse @ebynum, plus précisément, en utilisant la propriété keyCode.

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

Answer 4

Voici un exemple de 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);
    }
}

Answer 5

Vous pouvez y parvenir avec : EventTarget.dispatchEvent(event) et en passant un nouveau KeyboardEvent comme événement.

Par exemple : element.dispatchEvent(new KeyboardEvent('keypress', {'key': 'a'}))

Exemple de travail :

// 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