Champ formulaire qui s'allonge lors d'un clic

Version imprimable

Bonjour,

j'ai actuellement un champ qui est a 20 caractères et je voudrais que si on clique dessus le champ s'allonge si le texte est plus long que la taille de 20 initiale et que celui ci s'arrete de s'agrandir si il atteint son maxlength de 80 caractères. Connaissez vous un petit scripts php qui va dans ce sens ?

voici le champ :
Code:

1 2 3 4 5 <table bgcolor="#000" width="19" border="1" cellspacing="0" cellpadding="0"> <tr> <td><input name="champ" type="text" id="champ" value="lllllllllllllll" size="20" maxlength="80"></td> </tr> </table>
Merci a vous

Bonjour.

Si vous n'avez pas trouvé, testez cette 'minipage' avec votre navigateur favori : La taille du champ grandit au fur et à mesure de la saisie...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<html><head> 
     <script type="text/javascript">
     function modification(X)
          {
     if ( X.value.length > 8 ) X.setAttribute("size", X.value.length) ; 
          }          
     </script>
</head><body onload="document.getElementById('texte').focus()"> 
     <FORM>
          <label>Entrez un texte (max: 20 caractères) :</label>
          <input id="texte" type="text" size="8" maxlength="20" onkeyup="modification(this)">
     </FORM>
</body></html>

Cordialement.

02/06/2014, 11h51
thomix68

merci

Merci a toi mais avec ce script est il possible de revenir a la taille initiale (8 dans le code donne) lorsque que on est plus dans le champs ou autre par dans la page ?

merci
02/06/2014, 12h07
iakou

Tel que c'est écrit, la taille du champ va s'adapter à la saisie (onkeyup gérant l'attribut "size" du champ).

Si vous avez testé la page, vous avez pu constater que, quand vous raccourcissez votre saisie la taille du champ diminue également !

Je ne comprends pas bien ce que vous voulez de plus ?

Cdlt
02/06/2014, 12h41
thomix68

oui actuellement le champ vide fait 8 en size lorsque il est vide , lorsque je le remplis le champs s'allonge comme prevu , mais je voudrais que meme si le texte est plus long et que le visiteur n'est plus sur le champ il retourne a sa taille initiale 8 en size et que si le visiteur reclique sur le champs il se rallonge jusq'au nombre de caracteres qui y'a dans le champs

j'ai un exemple tout bete qui correspond a ce que je veux faire , lorsque que un fichier csv est ouvert dans openoffice feuille de calcul et que un champs est plus grand il est en taille normale et des que lorsque on clique dessus si le texte dans le champ est plus grand que la cellule s'agrandit et des lorsque que on clique autre part le champ reprend sa taille initiale

je c'est pas si c'est très clair ...
02/06/2014, 12h54
iakou

Humm !
Oui effectivement, dans votre exemple, vous autorisez jusque 80 caractères (cela peut d'ailleurs perturber l'affichage correct de votre page HTML).
Je pense qu'il faut jouer avec l'évènement "onblur" : Quand l'utilisateur quitte le champ, JS réinitialise l'attribut "size".
Mais cela je vous le laisse écrire.
Bonne continuation