Bonjour à tous, j'ai une liste qui s'affiche lorsqu'on click sur un champ texte.
On peut sélectionner une valeur de la liste en clickant dessus, mais il serait plus pratique de pouvoir le faire aussi avec les touches directionnelles et la touche entrer pour valider (mais bon ça j'ai une petite idée).
Merci d'avance.
Code : 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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58 <!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> #liste{ position:absolute; left:5px; top:18px; } #element_liste{ width:133px; background:#FFFFFF; list-style-type:none; cursor:pointer; } #element_liste:hover{ background:#6495ED; } </style> <script> function afficher_villes() { document.getElementById("liste").style.display = "block"; } function cacher_ville() { document.getElementById("liste").style.display = "none"; } function valider(valeur) { document.getElementById("formulaire").ville.focus(); document.getElementById("formulaire").ville.value = valeur; document.getElementById("liste").style.display = "none"; } </script> </head> <body> <form id="formulaire" action="#" method="get"> Ville <input type="text" name="ville" value="" onfocus="afficher_villes()" onblur="cacher_ville()" autocomplete="off"/> <input name="boutton" type="submit" value="Envoyer"> </form> <ul id="liste"> <li id="element_liste" onmousedown="valider('Paris')">Paris</li> <li id="element_liste" onmousedown="valider('Marseillan')">Marseillan</li> <li id="element_liste" onmousedown="valider('Agde')">Agde</li> <li id="element_liste" onmousedown="valider('Cap d\'Agde')">Cap d'Agde</li> <li id="element_liste" onmousedown="valider('Beziers')">Beziers</li> </ul> <script> cacher_ville(); </script> </body> </html>
Partager