web-dev-qa-db-fra.com

Déclencher un événement de pression de touche / keydown / keyup dans JS / jQuery?

Quel est le meilleur moyen de simuler un utilisateur saisissant du texte dans une zone de saisie de texte dans JS et/ou jQuery?

Je ne pas veux réellement mettre du texte dans la zone de saisie, je veux juste déclencher tous les événements gestionnaires qui seraient normalement déclenchés par un utilisateur tapant des informations dans une entrée boîte. Cela signifie que la mise au point, la pression au clavier, l'appui sur la touche, la configuration au clavier et le flou. Je pense.

Alors, comment accomplir cela?

javascriptjquerydom-events
162
Alex

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

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

Cela fait-il ce que vous essayez de faire?

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

Si vous souhaitez déclencher les événements-clés avec des clés spécifiques, procédez comme suit:

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

Il existe 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 avec la propriété .which.

224
ebynum

Pour déclencher une enter appuyez sur la touche, j'ai dû modifier la réponse @ebynum, plus précisément à l'aide de la propriété keyCode.

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

Vous pouvez envoyer des événements comme

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

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

Vous êtes maintenant capable de faire:

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

Vous pouvez y parvenir avec: EventTarget.dispatchEvent(event) et en transmettant un nouvel événement KeyboardEvent en tant qu'é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

8
JSON C11

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 en utilisant 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
2
yuliskov

Je pensais attirer votre attention sur le fait que dans le contexte spécifique où un auditeur était défini dans un plugin jQuery, la seule chose qui a simulé avec succès l'événement de frappe pour moi, finalement capturé par cet écouteur, était d'utiliser setTimeout (). par exemple.

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

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

0
Fabien Haddadi

Pour la conversion TypeScript en KeyboardEventInit et fournissez le nombre entier correct KeyCode

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