Discussion :

[schnee]

Bonjour,
Quand on clique sur une option dans un <datalist, ça ne devrait pas déclencher un event du clavier puisque on ne touche pas au clavier.
Le comportement est normal sur Firefox, mais pas sur Chrome.
Voir le code suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser" onkeyup='keyup(event)'>
 
<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist></body>
</html>
<script>
function keyup(event)
  {
  console.log ("keyup : " + event.code);
  }
</script>

Tapez la clé C, il reste Chrome dans la liste, cliquez sur l'option Chrome et vous obtenez deux events keyup :

keyup : KeyC
keyup : undefined

Le premier est normal, mais le second déclenché par la souris ne l'est pas, d'ailleurs le code est vide.

Avec Firefox, la même opération ne donne que la ligne
keyup : KeyC

[Toufik83]

Bonjour,

Il faudrait utiliser les événements keypress ou input au lieu de keyup pour éviter le conflit.

[schnee]

Ah, en effet, comme ça ça marche.
Merci.
Mais ça n'empêche qu'il y a un bogue dans Chrome.

[schnee]

Bon, en fait je me suis enthousiasmé trop vite :
- avec keypress, le caractère pressé ne se trouve pas encore dans le champ INPUT, et j'en ai besoin. (OK, je peux le trouver dans event.code, mais ça ne me dit pas à quel endroit dans le champ il va être déposé).
- l'évènement input est déclenché dans les deux cas, clavier ou option cliquè (ce qui est logique) et je veux justement différencier les deux.

Je vais donc continuer à utiliser keyup et vérifier le contenu de event.code lequel est vide dans le cas d'un click.