High-Tech Santé Médecine Droit-Finances

Grippe A

Que dois-je faire ?

Rechercher : dans
Par :

Javascript / Fonction après création textarea

Dernière réponse le 9 jun 2009 à 15:26:06 jemakaku, le 7 jun 2009 à 13:30:01 
 Signaler ce message aux modérateurs

Bonjour,
Actuellement débutant en javascript, j'ai honteusement copié du code un peu partout pour arriver à créer une page html destinée à l'étude de mes cours.

RESUME :
Il faudrait que la taille de mes textarea s'adapte automatiquement à leur contenu au moment de leur création.
Actuellement ca fonctionne très bien mais il faut cliquer dessus. (code plus bas)

DETAILS :
Objectif (pas important) : pouvoir afficher/cacher par simple clic le "contenu" d'une hiérarchie (que je crée moi-même)

Par soucis de facilité, j'utilise des textarea pour entrer du texte brut sans devoir me casser la tête avec des <br />

Ces textarea sont crées actuellement avec une taille par défaut et j'aimerais que leurs tailles s'adaptent automatiquement à la création en fonction du contenu par défaut.

La fonction qui adapte le contenu existe et fonctionne très bien. Le problème c'est que pour l'instant il faut cliquer sur le textarea pour qu'elle s'exécute.

J'ai essayé avec un "oninput" pour que ce soit à la création mais hélas, manifestement le contenu est rajouté APRES la création, ce qui fait que le textarea ne s'y adapte pas. (onpropertychange ne fonctionne pas non plus)

CODE : 

<html>
<head>

<script type="text/javascript">
function fitToText()
{
 if (this.scrollHeight>this.clientHeight)
 {
  this.style.height=(this.scrollHeight+20)+"px";
 }
 else
 {
  this.style.height="10px";
  this.style.height=(this.scrollHeight+20)+"px";
 }
}

function aff(objet)
{ 
	if(document.getElementById(objet).style.display == "block")
	{ 
		document.getElementById(objet).style.display = "none";
	}
	else
	{ 
		document.getElementById(objet).style.display = "block";
	}
}
</script> 

</head>
<body>

<p><a href=javascript:aff('1.1');>Partie 1 : PROCESSUS (Généralités)</a></p>
<div id="1.1";>
	<p><a href=javascript:aff('1.1.1');>Définition / ce qu'on processus comporte (3) / Les infos concernant un processus. (7)</a></p>
	<div id="1.1.1";>
		<textarea id="1.1.1" onclick="fitToText.call(this)">contenu
du
texte
area
qui
est
censé
s'adapter
a
sa création</textarea>
	</div>
</div>
</body>
</html>


Merci d'avance pour votre aide! :-)

Jema

Meilleures réponses pour « Javascript / Fonction après création textarea » dans :
Javascript - Manipulation des contrôles clavier VoirManipulation des contrôles clavier Cette astuce a pour but de vous faire découvrir la (ou du moins une) manière de contrôler les évènements clavier en javascript. Cela vous permettra de contrôler/attribuer les/des comportements particuliers à...
Javascript - Les fonctions VoirLa notion de fonction On appelle fonction un sous-programme qui permet d'effectuer un ensemble d'instructions par simple appel de la fonction dans le corps du programme principal. Cette notion de sous-programme est généralement appelée fonction...
Javascript - l'objet Array VoirLes particularités de l'objet Array L'objet Array est un objet du noyau Javascript permettant de créer et de manipuler des tableaux. Voici la syntaxe à utiliser pour créer une variable tableau : var x = new Array(element1[, element2, ...]); Si...
Javascript - L'objet RegExp VoirLes particularités de l'objet RegExp L'objet RegExp est un objet permettant de manipuler des expressions régulières, c'est-à-dire des modèles créés à l'aide de caractères ASCII permettant de manipuler des chaînes de caractères, afin de trouver des...
Posez votre question Répondre

1

hamzafes, le 7 jun 2009 à 15:17:13

Utiises onload de la balise body:


<body onload="fitToText('montexte')">

....

<textarea name="montexte" id="montexte"> </textarea>
....

</body>

<script language="javascript">

function fitToText(balise_id)
{
balise=document.getElementById(balise_id);
//....
// balise doit remplacer le this
//....
}

</script>


Allah mo3ine

   
Répondre à hamzafes

2

jemakaku, le 7 jun 2009 à 16:30:33

Merci pour ta réponse. J'ai appris quelque chose. :-)

Hélàs ca ne fonctionne pas. Ca agit exactement de la même manière qu'avec l'utilisation de "oninput" dans le "textarea". C'est à dire qu'il exécute bien la fonction, mais avant de remplir le "textarea" et donc pour la taille il met presque rien vu que quand il fait le calcul, c'est vide. :-(

Merci d'avoir essayé. :-)

   
Répondre à jemakaku

3

jemakaku, le 8 jun 2009 à 23:35:36

J'ose un petit up. :-)

   
Répondre à jemakaku

4

hamzafes, le 9 jun 2009 à 13:18:16

Tu peux faire autre chose,
tu appel la fonction après le code du textarea, comme ça:

<textarea name="montexte" id="montexte">

....

</textarea>

<script language="javascript">

fitToText("montexte"); /* appel de la fonction fitToText, normalement le textarea a déjà sont contenu */


function fitToText(balise_id)
{
//....
}

</script>

   
Répondre à hamzafes

5

 jemakaku, le 9 jun 2009 à 15:26:06

Ca marche! :-)

Bon, pas directement, c'est un peu compliqué mais TES propositionS m'ont permis de trouver le problème.

En fait le "oninput" aurait du marcher, donc ta première proposition aurait du marcher aussi. Sauf que tout est caché par défaut à la création du fichier et c'est ca qui empêchait l'exécution correcte de la fonction.

Maintenant, grâce à ta seconde proposition, j'ai pu tester en réaffichant avant que le textarea ne soit créé et là, ta première proposition fonctionne du coup très bien (très pratique d'ailleurs :-)).

Merci beaucoup!

Jema

   
Répondre à jemakaku
Posez votre question Répondre
Ils ont besoin de votre aide
Collection CommentÇaMarche.net