Forum d'entraide PHPFrance

Bonjour à tous,

Après plusieurs heures à chercher, je reste bredouille concernant ce problème que je pensais pouvoir résoudre en deux coups de cuillère à pot.

Je précise mon problème pour qu'il n'y ait pas d'ambiguïté. Voilà ce que je voudrais faire (par javascript et le DOM bien entendu) :
Si j'ai un texte qui tient sur deux lignes dans mon textarea (en fonction du width que je lui aurais affecté), je voudrais que la hauteur (height) de ce textarea soit calé précisément pour qu'il s'arrête bien sous ces deux lignes.
Si j'ai un texte qui tient sur 9 lignes dans mon textarea, la hauteur se cale de la même façon.
Etc.
En d'autres termes, si j'« empile » plusieurs textarea de ce type les uns sur les autres, avec chacun des textes quelconques et de longueurs variables, tous ces textes se suivent *sans espace vertical* entre eux (mon border étant à 'none', on ne voit pas que ce sont des textarea, et cela donne un texte fluide).

Notez que j'écarte définitivement la solution qui consisterait à compter la longueur de texte (texte.length) en la multipliant par la taille du glyphe du caractère à laquelle je substituerait l'âge du capitaine, etc. Cette solution, sans parler de son inélégance, me semblerait trop aléatoire.

Il m'avait semblé, un jour lointain, avoir rencontré un code qui pouvait tester si le textarea était en overflow (texte dépassant du cadre), mais impossible de remettre la main dessus. Pourtant, avec cette information, je pourrais me débrouiller.

Une autre note : ce serait pour une utilisation exclusive sur Firefox, donc la compatibilité avec ie ou tout autre navigateur n'est pas indispensable.

Merci de notez que la réponse qui consisterait à me dire que ma recherche n'a aucun intérêt, ou qu'on ne voit pas où est l'intérêt, ne m'aiderait pas beaucoup. Pour moi et mon application, elle en a un énorme

.

Merci à tous ceux qui pourront répondre à ma requête,

Bien à vous tous,

Phil

Après quelques heures de prises de tête, j'ai trouvé une solution.

Ça n'est pas très élégant, ça ressemble à de la bidouille, mais ça a l'avantage de fonctionner proprement.

Le principe : construire discrètement un label avec le texte à placer dans le textarea, en relever les dimensions (hauteur et largeur), et les appliquer au textarea.

Si quelqu'un a une autre solution, plus élégante, je l'attends bien sûr toujours avec grande impatience.

Code : Tout sélectionner


/* Le texte qui va me servir pour mes essais */
	var monTexte = "Ceci est un très long texte qui devrait pouvoir couvrir \nplusieurs \nlignes pour obliger le textarea a "
		+ "se déformer correctement.\nS'il est capable de le faire, je veux bien me joindre à \nCoppola,\nLucas et…\nSpielberg "
		+ "pour lui décerner un oscar de la meilleure (en)div." ;

	/* L'objet DOM dans lequel je veux placer mon textarea
		Ici, pour le test, simplement le document lui même
	*/
	var oInner = document.body;
	// Sinon utiliser : var oInner = document.getElementById("<id de mon objet parent>") ;

	/* Construire le label provisoire */
	var oLabel = document.createElement('label');
	// On le met au même style (class CSS) que le textarea (très important : sinon, on ne peut rien
	// garantir concernant l'aspect). Ici, j'ai défini dans ma feuille de style :
	// textarea.syn-textarea, label.syn-textarea {
	//		/* je veux qu'on ne devine pas que c'est un textarea */
	//		border: none; margin: 0; padding: 0;
	//		<la définition de mon style> 
	// }
	oLabel.className = "syn-textarea" ;
	// Au cas où on n'aurait pas précisé dans le style ci-dessus que le display est block,
	// il faut informer le label (par nature « inline ») qu'il devra être un block bien solide
	oLabel.style.display = "block" ;
	// Je ne me fais pas avoir par les retours chariots… (le label les ignore, puisqu'il travaille
	// en HTML, alors que mon textarea en tient compte
	var monTexteForLabel = monTexte.replace(/\n/g, '<br />') ;
	// On colle le texte corrigé dans le label (sans prendre la peine de créer un objet DOM, on
	// a quand même d'autres choses à faire…)
	oLabel.innerHTML = monTexteForLabel ;
	// On le met dans le document
	oInner.appendChild ( oLabel ) ;

	/*=== On peut maintenant relever les dimensions de ce label ===*/

// La largeur du label
	var w = oLabel.offsetWidth ;
// La hauteur du label
	var h = oLabel.offsetHeight ;

	// On n'en a plus besoin, on s'en débarrasse comme d'un vieil Mo5
	oInner.removeChild(oLabel);

	/*=== Fort de ces informations, on peut maintenant construire le textarea ===*/
	oTexta = document.createElement('textarea');
	// On définit son aspect (la même class CSS que le label)
	oTexta.className = "syn-textarea" ;
	/* On lui applique les dimensions relevée sur le label */
	with (oTexta.style ) {
		width = w + "px" ;
		height = h + "px" ;
	}
	// On lui colle le texte
	oTexta.value = monTexte ;

	// Et pour finir, on le place dans le document
	oInner.appendChild(oTexta) ;

Bien à vous tous,

Phil

Forum d'entraide PHPFrance

Régler la hauteur d'un textarea en fonction de son contenu

Régler la hauteur d'un textarea en fonction de son contenu

Une solution