Les textarea

Bug internet explorer 8 pour les textarea avec cols et style width

Les dimensions d'une textarea sont déterminées par cols et rows, par exemple

<textarea rows="20" cols="80">

On peut bien entendu appliquer un style, par exemple

<textarea style="width: 100%" rows="20" cols="80">

Le conflit entre la largeur soécifiée par width et celle spécifiée par cols, est mal géré par IE8 qui peut provoquer un scroll vers la position du curseur.

Pour empêcher IE8 de recalculer la position du scroll sur le wrapping tu texte, il suffit de mettre une très grande valeur pour cols, disons 8000, plus grande que toute ligne contenue dans la textarea, par exemple

<textarea style="width: 100%" rows="20" cols="8000">

Déterminer si une textarea (ou un div) a une scrollbar

Que ce soit pour une textarea ou un div, la scrollbar verticale existe si

elem.clientHeight < elem.scrollHeight

Pour l'élément id, il suffit donc de tester si

document.getElementById(id).style.height  < document.getElementById(id).scrollHeight

Pour tester la scrollbar horizontale, remplacer height par width.

Adapter automatiquement la hauteur d'une textarea au contenu

Pour faire disparaître la scrollbar, il suffit de faire

elem.clientHeight = elem.scrollHeight

On peut utiliser la fonction

function FitToContent(id, maxHeight, minHeight) {
	var text = id && id.style ? id : document.getElementById(id);
	if (!text) return;
	var adjustedHeight = text.clientHeight;
	if (!maxHeight || maxHeight > adjustedHeight) {
		adjustedHeight = Math.max(text.scrollHeight, adjustedHeight);
		if (maxHeight) adjustedHeight = Math.min(maxHeight, adjustedHeight);
		if (adjustedHeight > text.clientHeight)	text.style.height = adjustedHeight + "px";
	}
	if (!minHeight || minHeight < adjustedHeight) {
		adjustedHeight = Math.max(text.clientHeight, text.scrollHeight);
		if (minHeight) adjustedHeight = Math.max(minHeight, text.scrollHeight);
		if (adjustedHeight < text.clientHeight) text.style.height = adjustedHeight + "px";
	}
}

et l'appliquer à divers événements de la textarea comme suit (la fonction addLoadEvent doit être définie séparément).

addLoadEvent(function() {
	FitToContent( "id", 50000 , 100);
	document.getElementById("id").onkeyup = function() { FitToContent( this, 50000 , 100);};
	document.getElementById("id").onmouseover = function() { FitToContent( this, 50000 , 100);};
	document.getElementById("id").onmouseup = function() { FitToContent( this, 50000 , 100);};
	}
);

IE ne tient pas compte de l'espace vide entre la fin du texte et le bas de la textarea, cette technique permet donc d'aaugmenter la hauteur comme de la réduire..
Le autres navigateurs tenant compte de cet espace vide, cette technique leur permet seulement d'augmenter la hauteur, ce qui est généralement largement suffisant.

Voici un exemple

On peut éventuellement détecter IE par

var IsIE = document.all?true:false

et prévoir un moyen de réduire la hauteur pour les autres navigateurs. Par exemple, lors du focus on peut remettre d'abord la hauteur à 1px puis à scrollHeight.

Voici un exemple avec une boucle sur plusieurs (2) textarea qui s'adaptent au focus et se rétractent à la perte du focus.