Liste avec saisie libre

**nox75** · 23/05/2007, 11h35

Salut à tous,

bon je vais poser une question peut etre deja posée mais me lapidez pas '-_-
J'ai fait une recherche sur le forum mais bon comme parfois les orthographes sont douteuses etc...ca n'a pas été un franc succes ^^

Donc voila...

Je voudrais créer une liste avec saisie libre possible...

C'est à dire un champ avec un bouton permettant de dérouler une liste, et si on ne trouve pas son bonheur dans la liste, on peut cliquer dans le champ et saisir autre chose.
La nouvelle valeur n'est pas ajoutée à la liste...

J'avoue que mon ami google ne m'a rien donné de transcendant sur ce coup la donc si quelqu'un sait comment je peux faire je suis preneur...

Merci d'avance ^^

**Ouach** · 23/05/2007, 14h12

A ma connaissance, je ne pense pas que cet objet existe. Par contre, il y a moyen de contourner le problème: Dans ta liste, tout en bas, met l'option 'Autre...'. Si le visiteur choisit cette option, via javascript, tu rends visible un input de type texte dans lequel, il introduit sa nouvelle valeur. Si après cela, dans la liste, il choisi une autre option que 'Autre...', il faut cacher l'input.

**nox75** · 23/05/2007, 15h09

waip j'avais pensé à cette solution de secours...
Mais bon j'aurais bien voulu l'éviter...

Ceci dit si c'est pas faisable c'est pas faisable ^^

**Auteur** · 23/05/2007, 20h09

bonjour,

liste avec contenu modifiable :

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<style type="text/css">
<!--
.liste{
 float: left;
 margin: 10px;
 padding: 2px;
}
 
.listeTitre, .listeItem{
 width: 200px;
}
 
.listeTitre input{
 text-align: center;
 width: 100%;
}
 
.listeItem{
 display: none;
 position: absolute;
 border: 1px solid #AAAAAA;
 height: 100px;
 overflow: auto;
 background-color: #FFFFFF;
 z-index: 20;
}
 
.item{
 border: none;
 text-align: center;
 cursor: default;
 width: 100%;
}
 
.itemOver{
 background-color: #DEDEFF;
}
 
.itemOut{
 
}
 
.crlf{
 visibility: hidden;
 clear: both;
}
//-->
</style>
 
<script type="text/javascript">
<!--
var tempo=null, objTempo, dblClic = false;
 
function gestionListe()
{
 var liste = document.getElementById("idListe");
 var etat = liste.style.display;
 
 if (etat=="" || etat=="none")
    liste.style.display = "block";
 else
     liste.style.display = "none";
 
}
 
function mouseClicTempo()
{
 document.getElementById("idChoix").value = objTempo.value;
 gestionListe();
 tempo = null;
}
 
function mouseClic(obj)
{
 //document.getElementById("idChoix").value = obj.value;
 objTempo = obj;
 
 //temporisation pour rendre le double clic prioritaire devant le simple clic
 //tempo >= 300 ms
 if (tempo==null && obj.readOnly==true)
    tempo = setTimeout("mouseClicTempo()","300");
}
 
function mouseDoubleClic(obj)
{
 if (tempo!=null)
    clearTimeout(tempo);
 
 if (obj.readOnly == true)
 {
   obj.readOnly = false;
   obj.style.border = "inset #AAAAAA 1px";
   obj.style.textAlign = "left";
   obj.focus();
 }
 else
   inputBlur(obj);
 
  tempo = null;
}
 
function inputBlur(obj)
{
  if (obj.readOnly==false)
  {
   obj.readOnly = true;
   obj.style.textAlign = "center";
   obj.style.border = "none";
  }
}
 
function mouseOver(obj)
{
  obj.className = "item itemOver";
}
 
function mouseOut(obj)
{
  obj.className = "item itemOut";
}
 
//-->
</script>
 
</head>
 
<body>
<div><br /><br /><br /><br />
bla bla bla bla bla bla bla bla bla bla bla bla<br />
bla bla bla bla bla bla bla bla bla bla bla bla<br />
</div>
 
 
<!-- debut de la liste -->
<div class="liste">
  <div class="listeTitre">
  <input  id="idChoix" type="text" value="Faites votre choix" readonly="readonly" onclick="gestionListe()"/>
  </div>
 
  <div class="listeItem" id="idListe" title="Double-cliquez sur un élément pour modifier son contenu">
 
    <input class="item itemOut" type="text" value="Votre choix 1" readonly="readonly" onclick="mouseClic(this)" ondblclick="mouseDoubleClic(this)" onblur="inputBlur(this)" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" /><br />
    <input class="item itemOut" type="text" value="Votre choix 2" readonly="readonly" onclick="mouseClic(this)" ondblclick="mouseDoubleClic(this)" onblur="inputBlur(this)" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" /><br />
    <input class="item itemOut" type="text" value="Votre choix 3" readonly="readonly" onclick="mouseClic(this)" ondblclick="mouseDoubleClic(this)" onblur="inputBlur(this)" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" /><br />
    <input class="item itemOut" type="text" value="Votre choix 4" readonly="readonly" onclick="mouseClic(this)" ondblclick="mouseDoubleClic(this)" onblur="inputBlur(this)" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" /><br />
    <input class="item itemOut" type="text" value="Votre choix 5" readonly="readonly" onclick="mouseClic(this)" ondblclick="mouseDoubleClic(this)" onblur="inputBlur(this)" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" /><br />
    <input class="item itemOut" type="text" value="Votre choix 6" readonly="readonly" onclick="mouseClic(this)" ondblclick="mouseDoubleClic(this)" onblur="inputBlur(this)" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" /><br />
    <input class="item itemOut" type="text" value="Votre choix 7" readonly="readonly" onclick="mouseClic(this)" ondblclick="mouseDoubleClic(this)" onblur="inputBlur(this)" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" /><br />
    <input class="item itemOut" type="text" value="Votre choix 8" readonly="readonly" onclick="mouseClic(this)" ondblclick="mouseDoubleClic(this)" onblur="inputBlur(this)" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" />
 
  </div>
</div>
<hr class="crlf" />
<!-- fin de la liste -->
 
 
<div>
bla bla bla bla bla bla bla bla bla bla bla bla<br />
bla bla bla bla bla bla bla bla bla bla bla bla<br />
bla bla bla bla bla bla bla bla bla bla bla bla<br />
bla bla bla bla bla bla bla bla bla bla bla bla<br />
</div>
 
<div id="test"></div>
</body>
 
</html>

clique sur "Faites votre choix" pour afficher ou masquer la liste ;
double cliquer l'élément de la liste pour l'éditer et le modifier, double-cliquer pour valider la saisie ;
simple clic pour choisir l'élément dans la liste sans le modifier et cacher la liste.

J'ai rajouté une temporisation de 300ms (c'est un minimum !) pour que le double-clic soit prioritaire devant le simple clic.
Fonctionne sous IE et Firefox.
Code valide XHTML 1.1

**nox75** · 24/05/2007, 10h17

merci bcp Auteur

je vais regarder ca et si j'ai des questions je t'interpelle ^^

**Auteur** · 24/05/2007, 11h36

Envoyé par Auteur

J'ai rajouté une temporisation de 300ms (c'est un minimum !) pour que le double-clic soit prioritaire devant le simple clic.

Je viens de m'apercevoir que la durée de la temporisation dépend de la configuration du double-clic chez l'utilisateur.

L'intervalle de temps entre 2 clics peut être plus ou moins long selon la configuration du système (dans mon cas, il est inférieur à 300ms). Sur certaines machines, il est sans doute plus long...

Liste avec saisie libre

JavaScript

Discussions similaires

Partager

Partager