html /ajuster automatique zone de texte a la saisie

html /ajuster automatique zone de texte a la saisie - HTML/CSS - Programmation

Marsh Posté le 11-01-2006 à 15:20:27    

bonjour tous le monde,  
 
je voudrais savoir si il est possible d'ajuster automatiquement la taille d'une zone de texte en html:
 
j'ai une zone d'une taille de 20
la max-lenght pour la saisie est de 50
 
le pb est que si on saisie plus de 20 caractere le debut du texte n'est plus visibleet je voudrais que cela soit la zone de texte qui s'agrandissent plutot que le texte qui defile????
 
est-ce possible?????

Reply

Marsh Posté le 11-01-2006 à 15:20:27   

Reply

Marsh Posté le 11-01-2006 à 15:35:26    

ben on peut
 
sur l'évènement onchange de cet élément
 
onchange="if (this.value.length>20)>this.size=this.value.length"
 
c'est un truc dans le genre je vais verifier :o

Reply

Marsh Posté le 11-01-2006 à 16:00:22    

heu sur l'évenement onkeypress plutot, sinon ca marche bien, mais si tu mets que des 1 ou des l ca fait une différence de taille kan meme
 
normalement un input, s'il fait 50 en maxlength, il doit faire 50 en size et pas autrement :o

Reply

Marsh Posté le 11-01-2006 à 16:21:05    

euh...
 
je comprend un petit peu mais pas beaucoup quand meme en fait je vois pas du tout comment faire pour rajouter ca dans mon code

Reply

Marsh Posté le 11-01-2006 à 16:31:59    

voila ce que j'ai fai mais ca ne marche pas:
 
<input type="text" id="txtNormal" size="25"  
  onkeypress="if (this.value.length>20)>this.size then size=this.value.length"/><br />

Reply

Marsh Posté le 11-01-2006 à 18:03:47    

tu aurais bien du te douter que il y avait des erreurs dans mon code nan ? :o
 
<input type="text" id="txtNormal" size="25"  
  onkeypress="if (this.value.length>20) this.size=this.value.length" />

Reply

Marsh Posté le 12-01-2006 à 10:54:14    

merci pour ton expliation et ton bout de code,  
ce qui est dommage par contre c'est que je ne peu plus le lié avec ma css car dans ma css j'avai ceci:
#txtNormal {
 width:200px;
 }
 
si j'enleve dans le code html id="txtNormal" ca marche nikel
si j'enleve dans ma css le width:200px
mais que je laisse dans mon code html le id="txtNormal" ca macrhe po :(
pourquoi???????

Reply

Marsh Posté le 12-01-2006 à 10:55:27    

excuse moi j'avais une faute d'orthographe c'est pour ca que ca ne marchais po :o
 
mais bon je trouve bete de devoir mettre la size dans le code html alors que j'utilise une css :sarcastic:


Message édité par bedomon le 12-01-2006 à 10:56:34
Reply

Marsh Posté le 12-01-2006 à 11:46:17    

size c'est le nombre de caractère, on peut modifier avec Width,  
 
mais le problème c'est comment veut tu générer un width à partir du nombre de caractères toua ?
au debut je pensais aux propriétés offsetWidth et scrollWidth d'un objet en JS, mais nan car pour un input texte, offsetWidth = scrollWidth = Width malheureusement.
 
à la rigueur tu admet une largeur de caractère moyenne de 8px (par exemple heing :o)
 
puis tu redefini le width en conséquence :  
 
<input type="text" id="txtNormal" size="25"    
  onkeypress="if (this.value.length>20) this.style.width=this.value.length*8" />


Message édité par gatsu35 le 12-01-2006 à 11:46:29
Reply

Marsh Posté le 12-01-2006 à 11:59:35    

pfff quand je lis tes reponse ca a l'air trop facile mais en fait je galère trop pour de petite connerie de ce style... :cry:  
 
je vai essayé ca
 
et j'aurai une question concernant le wrapping ??? je l'ai mis en attribut (wrapping="virutal" ) dans un textarea mais ca marche po.... :??:  

Reply

Marsh Posté le 12-01-2006 à 11:59:35   

Reply

Marsh Posté le 12-01-2006 à 12:16:57    

c'est quoi que tu entends par un wrapping ???

Reply

Marsh Posté le 12-01-2006 à 12:19:41    

Idée bête (mais basé sur la taille moyenne d'un caractére) : définir la taille en css tout simplement à l'aide de l'unité "em". Ca implique certe de modifier l'attribut "style" en faisant attention aux éventuelles autres valeurs de cet attribut.

Reply

Marsh Posté le 12-01-2006 à 12:39:39    

le wrapping c'est le retour a la ligne automatique quand on arrive sur le bord droit d'un textarea

Reply

Marsh Posté le 12-01-2006 à 12:42:52    

omega2 : je t'aimeeeeeeeeeeeeeeeeeeeee

Reply

Marsh Posté le 12-01-2006 à 12:46:53    

<input type="text" id="txtNormal" onkeypress="if (this.value.length>20) this.style.width=this.value.length*0.5+'em'" />


Message édité par gatsu35 le 12-01-2006 à 12:47:14
Reply

Marsh Posté le 12-01-2006 à 12:47:03    

ca poutre sa maman tout ça :o

Reply

Marsh Posté le 12-01-2006 à 12:58:51    

:ouimaitre:

Reply

Marsh Posté le 30-09-2010 à 12:14:29    

Oui je sais je remonte un sujet datant de l'avant guerre ... mais voilà ca évite d'en recréer un, et surtout la réponse est presque là ..
 
Je m'explique, j'ai besoin au chargement de la page de faire en sorte que mes input soit d'une dimension égale à son contenu.
 
xxxxxxx |         000000 | xxxxxx
xxxxxxx |            0000 | xxxxxx
xxxxxxx |               00 | xxxxxx
 
Je voudrais obtenir et ensuite reprendre le code avec keypress pour ajuster la taille ... un peu comme dans Word en clair ;)
xxxxxxx | 000000 | xxxxxx
xxxxxxx | 0000 | xxxxxx
xxxxxxx | 00 | xxxxxx
 
Si qq'un à une idée ... le onLoad ne semble pas marcher ... ou alors le code ne fonctionne pas ;)
 
Merci pour votre aide
 
Cordialement

Reply

Marsh Posté le 30-09-2010 à 15:00:11    

ben calculer le "size" de chaque input et initialiser cet attribut avec la valeur calculée via le script php (j'ai supposé que ta page html était générée par un langage dynamique comme php mais ça marche aussi avec tout autre langage côté serveur)...


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 05-10-2010 à 09:59:36    

Voici la solution :
<input value="" OnKeyDown="javascript:if(this.value.length>0) this.size=this.value.length+15;this.maxLength='50';" size="1" style="text-align:center;">
@++ :)


Message édité par cetplus le 05-10-2010 à 10:14:37
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed