liste HTML incrémentable

Marsh Posté le 03-04-2006 à 11:33:37

Bonjour,

j'aurai voulu savoir comment on fait un champ de texte, qui affiché 1998 par exemple et qui permet de l'incrémentée ou de la décrémentée grâce à un bouton présent juste à côté. Ca doit être un champ de texte spécial, j'ai longtemps cherché mais pas retrouver.

C'est souvent utiliser dans les inscriptions de forums je crois.

si quelqu'un à une idée, merci !

Reply

Marsh Posté le 03-04-2006 à 11:33:37

Reply

Marsh Posté le 03-04-2006 à 11:41:43

Javascript

Tu chopes la valeur du champs, tu l'additionnes/soustaits, et tu remets la valeur...

Reply

Marsh Posté le 03-04-2006 à 11:44:29

Code :

<input type="text" id="inc" readonly="readonly" value="1998"/>
<input type="button" value="+" onclick="document.getElementById('inc').value = parseInt(document.getElementById('inc').value)+1;"/>
<input type="button" value="-" onclick="document.getElementById('inc').value = parseInt(document.getElementById('inc').value)-1;"/>

warning: not tested

Reply

Marsh Posté le 03-04-2006 à 11:49:48

je parle d'un truc de ce type :

http://www.nolife-united.net/divers/salut.jpg

Reply

Marsh Posté le 03-04-2006 à 11:51:37

C'est ce qu'on t'a filé

Message cité 1 fois

Reply

Marsh Posté le 03-04-2006 à 11:52:54

xtof_83 a écrit :

C'est ce qu'on t'a filé

+1
Après tu mets des css par dessus pour faire joli et zou...
Et si tu veux que le champs soit "éditable" vire l'attribut readonly

Reply

Marsh Posté le 03-04-2006 à 11:55:07

Bah, la différence, c'est que les boutons d'incrémentation sont à l'extérieur du champ de texte dans ton exemple. Personnellement, je recherche des boutons qui sont présents à l'intérieur du champ, je pense que c'est un champ de texte spécial, voire même une liste déroulante ???

Message édité par zeManuuu le 03-04-2006 à 11:57:49

Reply

Marsh Posté le 03-04-2006 à 12:24:06

Nan c'est exactement ce qu'on t'a donné... Si tu essayais un peu tout seul et que tu avais regardé les css comme conseillé tu aurais vu que c'était tout à fait ça... la preuve?

Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
div#theList{
border: 1px solid blue;
width: 220px;
padding: 0px;
}
input{
float: left;
margin: 0px;
padding: 0px;
}
input#inc{
width: 200px;
height: 22px;
}
img{
float: left;
width: 10px;
height: 10px;
border: 0px;
}
br.cleaner{
clear: both;
line-height: 0px;
}
</style>
</head>
<body>
<div id="theList">
<input type="text" id="inc" value="1998"/>
<a href="#" onclick="document.getElementById('inc').value = parseInt(document.getElementById('inc').value)+1;return false;">
<img src="haut.jpg" alt="haut"/>
</a>
<a href="#" onclick="document.getElementById('inc').value = parseInt(document.getElementById('inc').value)-1;return false;">
<img src="bas.jpg" alt="bas"/>
</a>
<br class="cleaner"/>
</body>
</div>
</html>

Message édité par anapajari le 03-04-2006 à 12:26:45

Reply

liste HTML incrémentable

Sujets relatifs:

Leave a Replay