Discussion :

[Jherek]

Je cherche à écrire un compteur qui affiche en temps réél le nombre de caractères entrés dans une textarea. Voila ce que j'ai fait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
function calculus(count) {
	var id = 'message'+count;
	var content = document.getElementById(id).firstChild.data;
	var len;
	if (content=="undefined") {
		len = 0;
	} else {
		len = content.length;
	}
	var remain = maxCount-len;
	var container = document.getElementById('counter');
	var oldContent = container.firstChild.data;
	var oldLen = oldContent.length;
	container.firstChild.replaceData(0,oldLen,remain);
}

et la textarea (généré avec DOM :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
        textarea1.setAttribute('id','message'+counter);
	textarea1.setAttribute('class','txt_area3');
	textarea1.setAttribute('onKeyDown','calculus('+counter+')');
        var textc = document.createTextNode(tabPushs[counter][3]);
	textarea1.appendChild(textc);

Résultat, quand je charge la page et que des données se trouvent deja dans la textarea (dans le TextNode textc), le champs se met à jour correctement. Mais quand j'entre des caractères ou que j'en supprime, ça ne se met pas à jour. Pourtant, en mettant des alert() dans ma fonction calculus, je vois que, grâce à l'event onKeyDown, ma fonction est bien appellée. Mais quand j'affiche mon "content", il est inchangé. Comment est-ce possible ?

[AurelBUD]

Je pense que lorsque tu detectes le 'keydown' la modification n'a pas encore eu lieue.

tu devrais plutot essayer 'onKeyUp' ou 'onChange'

[Jherek]

En fait, il suffit de remplacer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
var content = document.getElementById(id).firstChild.data;

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
var content = document.getElementById(id).value;

Le firstChild de l'élément, ça doit être le TextNode que je lui ai affecté et pas le contenu réél, j'imagine, ou un truc du genre.

[Jherek]

Cela dit, avec onKeyUp, ça marche mieux. Avec onKeyDown, si je selectionne le text à la souris et que j'appuie sur backspace, ça ne se met pas à jour correctement.