Fastselectedindex

Soyez le premier à donner votre avis sur cette source.

Snippet vu 9 059 fois - Téléchargée 27 fois

Contenu du snippet

Utilitaire de formulaire
Sur un select, permet, avec des des flèches haut/bas, un défilement rapide ou un par un des options du select, plus un bouton de sélection.
La page est restée en anglais car elle a été proposée, et acceptée sur The Javascript source.
http://javascript.internet.com/

Source / Exemple :


<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<meta name="ProgId" content="Editeur UltraEdit-32"> 
<meta name="date" content="2002-06-18"> 
<head>
<script type="text/JavaScript"> 
var compteur = 3;
var arret = new Boolean;
function selectplus() {
compteur = document.indexselect.choix.selectedIndex;
	if (compteur < document.indexselect.choix.length-1) {compteur ++;} 
document.indexselect.choix.selectedIndex=compteur;
if (compteur < document.indexselect.choix.length-1 && arret == false) {setTimeout('selectplus()',100);}
}
function selectmoins() {
compteur = document.indexselect.choix.selectedIndex;
	if (compteur > 0) {compteur --;} 
document.indexselect.choix.selectedIndex=compteur;
if (compteur > 0 && arret == false) {setTimeout('selectmoins()',100);}
}
function selectonep() {
compteur = document.indexselect.choix.selectedIndex;
	if (compteur < document.indexselect.choix.length-1) {compteur ++;} 
document.indexselect.choix.selectedIndex=compteur;
}
function selectonem() {
compteur = document.indexselect.choix.selectedIndex;
	if (compteur > 0) {compteur --;} 
document.indexselect.choix.selectedIndex=compteur;
}
</script>
</head>
<body>
<h1>Fast select of your indexed number</h1>
<form name="indexselect">
<p>
<select name="choix" size="3" value="Numbers" style="background-color:antiquewhite;color: black; width: 125px;">
<option>1
<option>2
<option>3
<option selected>3
<option>4
<option>5
<option>6
<option>7
<option>8
<option>9
<option>10
<option>11
<option>12
<option>13
<option>14
<option>15
<option>16
<option>17
<option>18
<option>19
<option>20
<option>21
<option>22
<option>23
<option>24
<option>25
<option>26
<option>27
<option>28
<option>29
<option>30
<option>31
</select>
<input type="button" value="Select !" onClick="document.indexselect.result.value=document.indexselect.choix.selectedIndex">
</p>
<p>
<input type="button" value="Down" onMouseDown="arret=false;selectplus();return false"  onMouseUp="arret=true">&nbsp<input type="button" value="Up" onMouseDown="arret=false;selectmoins();return false" onMouseUp="arret=true">
<span style="margin-left:20px">One by One : 
<input type="button" value="Down" onMouseDown="selectonep();return false">&nbsp<input type="button" value="Up" onMouseDown="selectonem();return false">
</span></p>
<p>Your select : <input type="text" name="result"value=""></p>
</form>
</body>
</html>

Conclusion :


J'aurais pu la remettre en français... ah le temps !
Est-ce bien utile ? A vous de voir...
Ajouter un commentaire Commentaire
Messages postés
15
Date d'inscription
dimanche 18 janvier 2004
Statut
Membre
Dernière intervention
30 septembre 2005

Pas mal ! Ca peut servir...
Mais si je peux me permettre un conseil pour améliorer cette source :
il faut prendre en compte l'évènement onmouseout dans les boutons et lui attribuer la même valeur que onmouseup. Sinon, telle que ta source est maintenant, elle présente un bug lorsqu'on clique sur un bouton, qu'on garde le clique de souris enfoncé et qu'on drag en dehors du input... En effet, à ce moment là, même si on relache le bouton de la souris, le setTimeout n'est pas stoppé alors que l'on n'enfonce plus le bouton de la souris.
Voilà c'est pas grand chose ! ;-)
A+

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.