Table des matières
Niveau
..........
En rapport...

une textarea qui s'adapte à son contenu

Le but ici est d'obtenir un champ de saisie mono-ligne capable de passer sur plusieurs si sont contenu l'exige.
Le principe est simple, on crée une textarea et on change son attribut “rows” en fonction de son contenu.

code

javascript
var OneRowHeight = 0;
			function dynamicHeight(textArea) {
				if (OneRowHeight == 0) OneRowHeight = textArea.style.height;
				var rows = textArea.value.split('\n');
				nRows=-1;
				for (i=0;i < rows.length; i++) {
					if (rows[i].length >= textArea.cols) nRows+= Math.floor(rows[i].length/textArea.cols);
				}
				nRows += rows.length;
				if (nRows >= textArea.rows) {
					textArea.rows = Math.min(2, nRows);
					textArea.style.height = "auto";
				} else if (nRows == 1) {
					textArea.rows = 1;
				} else if (nRows == 0) {
					textArea.rows = 1;
					textArea.style.height = OneRowHeight;
				}
		}
html4strict
<textarea onkeyup="dynamicHeight(this);" cols="30" rows="1" id="test" style="height: 15px;"></textarea>
A noter qu'en plus de jouer avec l'attribut “rows” nous appliquons un style au textarea afin de le mettre sur une seul ligne.
En effet ce composant affiche toujours un espace de 2 lignes minimum.

Description

A chaque pression d'une touche, la longueur du contenu est récupérer.
grâce a l'attribut “cols” du textarea, nous pouvons savoir combien de caractères s'affichent par ligne.
A partir de la, un simple calcul détermine si le nombre de ligne actuel est suffisent ou non.
Un cas particulier est traité : si la textarea redeviens vide, on la remet sur une seule ligne.

Limiter le nombre de ligne ou le rendre infini

Dans l'exemple ci-dessus, le nombre de ligne maximum est fixé à 3 grâce à la ligne suivante :

javascript
textArea.rows = Math.min(2, nRows);

Pour limiter le nombre de ligne a N il suffit de faire :

javascript
textArea.rows = Math.min(N-1, nRows);

Si vous désirez que votre textarea s'agrandisse sans aucune limite, il suffit de mettre :

javascript
textArea.rows = nRows;

Exemple

Vous pouvez consulter un exemple ici



22/02/2008 17:26 -

iDo –