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

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

Je ne veux pas réellement mettre du texte dans la zone de saisie, je veux juste déclencher tous les gestionnaires d' événements qui seraient normalement déclenchés par un utilisateur tapant des informations dans une zone de saisie. Cela signifie mise au point, touche enfoncée, pression de touche, touche montée et flou. Je pense.

Alors, comment y parvenir?

Vous pouvez déclencher n'importe lequel des événements avec un appel direct vers eux, comme ceci:

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

Est-ce que cela fait ce que vous essayez de faire?

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

Si vous souhaitez déclencher les key-events 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 y a une discussion intéressante sur les événements de pression de touche ici: jQuery Event Keypress: Quelle touche a été enfoncée? , en particulier en ce qui concerne la compatibilité entre navigateurs et la propriété .which.

Vous pouvez envoyer des événements comme

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

Pour déclencher une enterpression sur une touche, j'ai dû modifier la réponse @ebynum, en particulier, en utilisant la propriété keyCode.

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

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);
    }
}

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

Expédition MDN

MDN KeyboardEvent

Vous pouvez désormais faire:

var e = $.Event("keydown", {keyCode: 64});

Tout d'abord, je dois dire que l'échantillon de Sionnach733 a parfaitement fonctionné. Certains utilisateurs se plaignent de l'absence d'exemples réels. Voici mes deux cents. J'ai travaillé sur la simulation de clic de souris lors de l'utilisation de ce site: https://www.youtube.com/tv . Vous pouvez ouvrir n'importe quelle vidéo et essayer d'exécuter ce code. Il effectue le passage à 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

Je pensais attirer votre attention sur le fait que dans le contexte spécifique où un auditeur était défini dans un plugin jQuery, alors la seule chose qui a réussi à simuler l'événement keypress pour moi, finalement capté par cet auditeur, était d'utiliser setTimeout (). par exemple

setTimeout(function() { $("#txtName").keypress() } , 1000);

Toute utilisation de a $("#txtName").keypress()été ignorée , bien que placée à la fin du fichier .ready() function. Aucun supplément DOM particulier n'était de toute façon créé de manière asynchrone.

Pour le typage transtypé en KeyboardEventInit et fournissez l'entier keyCode correct

const event = new KeyboardEvent("keydown", {
          keyCode: 38,
        } as KeyboardEventInit);