Champ INPUT TEXT - Agrandir automatiquement selon la longueur du texte ?

Version imprimable

31/05/2007, 10h05
bilou95

Champ INPUT TEXT - Agrandir automatiquement selon la longueur du texte ?

Bonjour,

Je voudrais savoir comment agrandir la longueur du champ selon la longueur du texte s'affichant automatiquement (via des valeurs récupérées automatiquement).

Merci 8-)
31/05/2007, 11h22
jmulans

tu veut dire au fur et a mesure que tu ecrit, l'input s'agrandi ? c'est chaud ça... :?
31/05/2007, 11h24
bilou95

Non en fait via du php et javascript je récupère des données dans des tables MYSQL ... la donnée s'affiche automatiquement dans un champ INPUT TEXT ... ce que je voudrais c que dés que la valeur s'affiche, que le champ INPUT s'élargisse automatiquement selon la longueur du texte.

Vois tu ?

Tu crois que c chaud ?
31/05/2007, 11h24
nox75

Citation:

Envoyé par jmulans

tu veut dire au fur et a mesure que tu ecrit, l'input s'agrandi ? c'est chaud ça... :?

Jpense pas (enfin j'espere^^) je pense qu'il récupere une chaîne et qu'il veut adapter la taille du bouton à la chaîne.

Non ?
31/05/2007, 11h26
jmulans

ah ok, j'ai eu peur :lol:
bah a mon avis c'est possible, peut etre en javascript
31/05/2007, 11h29
jmulans

ah ou ptete en php en fait
tu fait une variable $taille que tu change quand tu reçoit ton texte

et ton input sera comme ça :

Code:

<input value="truc" size="<?php echo $taille;?>"/>
31/05/2007, 11h36
SpaceFrog

sinon sur le onload
si tu as définis une police à espacement fixe ..

Code:

obj.style.width=obj.value.length*10+'px';

Sinon j'ai osté dasn les contributions un truc pour connaitre la largeur occupée par un texte ...p
31/05/2007, 11h54
bilou95
Est il possible de rajouter cette objet ou valeur dans une syntaxe de ce style
Code:

1 2 document.getElementById("iddelinput0").style.visibility="visible";
Merci.
31/05/2007, 11h57
SpaceFrog

Désole bilou je n'ai pas compris le sens de ta question ...
31/05/2007, 12h09
bilou95

tu m'as demandé de rajouter dans le onload ce qui suit :
obj.style.width=obj.value.length*10+'px';

mais dans un onload ca ne m'interesse pas ...

Je voudrais en fait, savoir si il est possible de mettre cette syntaxe :

L'id (iddelinputX) etant mon champ INPUT TEXT

Code:

document.getElementById("iddelinput0").style...........

Vois tu ?
31/05/2007, 12h16
Gatsu35

Pourquoi tu mets ces données dans un input ?
pourquoi tu ne les mets pas dans un élément HTML normal ?

Voici une portion de mon code :
JAVASCRIPT Mélangé avec du PHP.

Code:

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
 
//déclaration de ma fonction dans un echo car necessaire pour recupérer la valeur $data['modele']
 
echo '<script type="text/javascript">
     function afficher0()
     {
     document.getElementById("iddelinput0").style.visibility="visible";
	 document.getElementById("iddelinput0").value="'.$data['modele'].'"
	 document.getElementById("iddelimgannul0").style.visibility="visible";
	 document.getElementById("iddelinput0").disabled = false;
	      }
     </script>';
 
 
 
if(isset($_POST["modele"])) {
	$sql_modele="UPDATE spare SET modele='".$_POST["modele"]."' WHERE id_spare='$id'";
	$exe_sqlmodele = mysql_query($sql_modele) or die('Erreur SQL !');
						}	  
	echo '<td style="border-color:#000000;border-width:1;border-style:dotted">'.$data['modele'].'<IMG src="image/edit.png" id="iddelimage0" onclick="afficher0()"><input type="text" disabled="disabled" name="modele" id="iddelinput0" style="visibility: hidden" value=""><a href="#" onclick="annuler0();"><IMG src="image/annuler.jpg" id="iddelimgannul0" style="visibility: hidden" style="border:"0"></a></td>';	
    echo'</tr>';
 
	echo'</tr>';
	echo '<tr>';
	echo '<td class="largeur" style="border-color:#000000;border-width:1;border-style:dotted"><strong><font size="1">N° série Machine</td>';

31/05/2007, 13h12
SpaceFrog

Precisons un peu les choses ...

Tu veux que l'input s'adapte à la largeur de son contenu juste au chargement de la page ou aussi lorsque tu le modifies ?

en fait lorsque tu clickes ... sur cette image (actuellement)
Code:

1 2 <IMG src="image/edit.png" id="iddelimage0" onclick="afficher0()">
ca va ! bien sur chercher la fonction afficher0()
Code:

1 2 3 4 5 6 7 8 function afficher0() { document.getElementById("iddelinput0").style.visibility="visible"; document.getElementById("iddelinput0").value="'.$data['modele'].'" document.getElementById("iddelimgannul0").style.visibility="visible"; document.getElementById("iddelinput0").disabled = false; }
cette fonction permet d'afficher l'input avec l'id=iddelinput0 avec la valeur récupérée ($data['modele'])
Code:

1 2 <input type="text" disabled="disabled" name="modele" id="iddelinput0" style="visibility: hidden" value="">
Je veux savoir si il est possible d'agrandir le champ selon la longueur de la donnée $data['modele'] récupérée

Vois tu ? :?

31/05/2007, 13h31
SpaceFrog

oui dasn cette meêm focntion tu ajoutes la partie du code que je propose dasn les contributions ou la faq pour calculer la taille d'un texte ...
31/05/2007, 13h45
bilou95

je te suis pas là ... quelle faq ? contributions ?

je vois pas je suis désolé

C'est curieux comme certains semblent allergiques aux recherches ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<script type='text/javascript'>
function textWidth(mytext){
document.getElementById('test').innerHTML=mytext
return document.getElementById('test').offsetWidth
}
</script>
</head>
 
<body>
<div id="test" style="display:inline;"></div>
<input type='text' id='saisie' />
<input type='button' onclick="alert(textWidth(document.getElementById('saisie').value))"

31/05/2007, 14h19
bilou95

je te remercie généreusement ... mon trés cher spaceFrog ! :king:

je te tiens au courant si cela fonctionne.
31/05/2007, 14h24
SpaceFrog

He ben voilà :
http://www.developpez.net/forums/sho...t=taille+texte