Discussion :

[bilou95]

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

[jmulans]

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

[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 ?

[nox75]

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 ?

[jmulans]

ah ok, j'ai eu peur
bah a mon avis c'est possible, peut etre en javascript

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

<input value="truc" size="<?php echo $taille;?>"/>

[SpaceFrog]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[bilou95]

Est il possible de rajouter cette objet ou valeur dans une syntaxe de ce style

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
document.getElementById("iddelinput0").style.visibility="visible";

Merci.

[SpaceFrog]

Désole bilou je n'ai pas compris le sens de ta question ...

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Vois tu ?

[Gatsu35]

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

[bilou95]

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

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
 
//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>';

[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 ?

[bilou95]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<IMG src="image/edit.png" id="iddelimage0" onclick="afficher0()">

ca va ! bien sur chercher la fonction afficher0()

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[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 ...

[bilou95]

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

je vois pas je suis désolé

[SpaceFrog]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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))"

[bilou95]

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

je te tiens au courant si cela fonctionne.

[SpaceFrog]

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