Simulation de l'événement keydown dans Chrome

Question

J'essaie de simuler un événement keydown dans la console Google Chrome. Le site qui m'intéresse est web.whatsapp.com et l'élément à prendre en compte est document.getElementsByClassName("input-search")[0];

Ce que j'essaie de faire, c'est que lorsque l'on tape du texte dans ce champ, la liste de contacts affichée sous ce champ est mise à jour avec les contacts contenant le contenu dans ce champ de texte.

Avant d'essayer quoi que ce soit d'autre, je mets juste le focus sur ce champ de texte en utilisant la réponse this.

choses que j'essayées sont:

1. https://stackoverflow.com/a/12187302/1291122 - Rien ne se passe et aucun élément est mis à jour dans la liste de contacts indiqué.

2. https://stackoverflow.com/a/4176116/1291122 - Encore une fois, le même résultat.

3. https://stackoverflow.com/a/10520017/1291122 - Rien ne se passe. Même résultat

Il y avait aussi quelques autres sources. Mais rien n'a fonctionné. Comment puis-je simuler l'effet exact (de taper du texte dans le champ de texte et voir la mise à jour de la liste de contacts) en utilisant JavaScript sur la console?

Ma version chromée est la plus récente à la date de la rédaction du réponse- 41.0.2272.101 EDIT:

Voici un des exemples de codes que j'ai essayé. (De réponse 3 ci-dessus)

setTimeout(function() { 
    $(".input-search").focus(); 
    Podium = {}; 
    Podium.keydown = function(k) { 
     var oEvent = document.createEvent('KeyboardEvent'); 

     // Chromium Hack 
     Object.defineProperty(oEvent, 'keyCode', { 
      get : function() { 
       return this.keyCodeVal; 
      } 
     }); 
     Object.defineProperty(oEvent, 'which', { 
      get : function() { 
       return this.keyCodeVal; 
      } 
     }); 

     if (oEvent.initKeyboardEvent) { 
      oEvent.initKeyboardEvent("keydown", true, true, document.defaultView, false, false, false, false, k, k); 
     } else { 
      oEvent.initKeyEvent("keydown", true, true, document.defaultView, false, false, false, false, k, 0); 
     } 

     oEvent.keyCodeVal = k; 

     if (oEvent.keyCode !== k) { 
      alert("keyCode mismatch " + oEvent.keyCode + "(" + oEvent.which + ")"); 
     } 

     document.dispatchEvent(oEvent); 
    } 
    Podium.keydown(83); 
}, 5000); 

En termes simples ce code dans votre console de navigateur Chrome (pour web.whatsapp.com) et appuyez sur Entrée. Puis cliquez immédiatement sur n'importe quelle partie de votre page Web (pour transférer la mise au point). Après 5 secondes, vous verrez le curseur sur ce champ de texte. Mais l'événement key down n'est pas invoqué.

Answer 1

Comme je travaille sur la manipulation web.whatsapp.com avec javascript, vous pouvez jeter un oeil à cette fonction que j'ai créé pour saisir du texte dans l'entrée de recherche:

function searchContact(text) 
{ 
    var input = document.getElementsByClassName("input input-search")[0]; 
    input.value = ""; 
    var evt = document.createEvent("TextEvent"); 
    evt.initTextEvent ("textInput", true, true, window, text, 0, "en-US"); 
    input.focus(); 
    input.dispatchEvent(evt); 
} 

input est l'élément d'entrée . evt est l'événement de frappe. text est le texte que vous souhaitez rechercher.

Cette fonction effectue les opérations suivantes:

obtenir l'entrée -> clair, il -> créer un événement de frappe de clavier -> concentrer l'entrée -> appliquer l'événement sur l'entrée

EDIT: Depuis la Wrriting de cette réponse, WhatsApp Web a été mis à jour et donc cette solution ne fonctionne plus dans WhatsApp Web. (peut être utile pour d'autres lieux ou projets)