Compter le nombre de caractères d'un textarea

Version imprimable

23/03/2009, 18h16
minos23

Compter le nombre de caractères d'un textarea
J'ai une page JSP qui contient un textarea et une zone text:
Code:

1 2 3 4 5 6 7 <p> Message <br> <textarea name="textarea" cols="50" rows="10"> </textarea><br> </p> <p> Nombre de caractères <input type="text" name="nbCaractère"> </p>
je veux afficher le nombre de caractères de textarea au fur et à mesur que l'utilisateur écrit dans le textarea.Comment je peux faire ça?
Merci d'avance.

Essaye ça :

Code:

1
2
3
document.getElementById("ton_textarea").onkeypress = function(){ 
	document.getElementById("ton_compteur").innerHTML = document.getElementById("ton_textarea").value.length; 
}

Salut, avec onkeypress, la dernière caractère que l'on est entrain d'appuyer n'est pas encore prise en charge dans son value mais utilise onkeyup.
Code:

1 2 3 document.forms['nomduform'].elements['textarea'].onkeyup=function(){ document.forms['nomduform'].elements['nbCaractère'].value=document.forms['nomduform'].elements['textarea'].value.length; }

24/03/2009, 09h39
emmanuel.remy

Question subsidiaire

Et comment fait on si l'utilisateur passe par le presse-papiers, clique bouton droit+coller ? :?

ERE
24/03/2009, 10h14
andry.aime

:arf: :question::question::question:
Je sais pas, est-il possible de capture l'evenement coller du clic droite?
Je ne pense pas :question:
24/03/2009, 10h23
emmanuel.remy

A part ajouter un onchange pour la mise à jour en sortie, effectivement je ne vois pas.

Ou alors si c'est vraiment indispensable, en plus du onkeyup on peut ajouter un timer qui met a jour les nombres de caractères pour se prémunir. Mais cela fait usine à gaz...

ERE
24/03/2009, 20h16
minos23
Citation:
Envoyé par andry.aime

Salut, avec onkeypress, la dernière caractère que l'on est entrain d'appuyer n'est pas encore prise en charge dans son value mais utilise onkeyup.

Code:

1 2 3 document.forms['nomduform'].elements['textarea'].onkeyup=function(){ document.forms['nomduform'].elements['nbCaractère'].value=document.forms['nomduform'].elements['textarea'].value.length; }
C'est quoi 'nomduform' et 'document'? et ou je dois écrire ce code puisque je travaille sur une page JSP qui est biensur en html?
Merci
24/03/2009, 20h47
emmanuel.remy
Citation:

Envoyé par minos23

C'est quoi 'nomduform' et 'document'? et ou je dois écrire ce code puisque je travaille sur une page JSP qui est biensur en html?
Merci

Tout cela c'est du javascript, pas du java !
Donc pas dans des balises <% ... %> !

Et cela correspond à:
Code:

1 2 3 4 <form name="nomduform" ...> <textarea name="textarea" ... > ...
ERE

Ben non, l'utilisation d'un timer n'est pas une usine à gaz :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<p>
Message
<form name="Myform">
<br>
<textarea name="textarea" cols="50" rows="10">
</textarea><br>
</p>
<p>
Nombre de caractères  <input type="text" name="nbCaractere">
</p>
</form>
<script type='text/javascript'>
onch("");	
function onch(txt) {
document.Myform.nbCaractere.value=txt.length.toString();
timer=setTimeout("onch(document.Myform.textarea.value)", 100); 	
}
</script>

24/03/2009, 22h16
emmanuel.remy

Par "usine à gaz" je voulais dire que cela se compliquait un peu trop par rapport aux première solutions.
Mais tu as raison, ce n'est pas usine à gaz si on ne garde que ce code. Autant pour moi. :scarymov:

Reste à voir l'intérêt d'un timer qui tourne 10x par secondes uniquement pour afficher le nombre de caractères de la textarea ;)

ERE
24/03/2009, 22h31
Auteur

Citation:

Envoyé par andry.aime

:arf: :question::question::question:
Je sais pas, est-il possible de capture l'evenement coller du clic droite?
Je ne pense pas :question:

avec onmousedown (ou onmouseup) tu détectes le bouton cliqué, même le bouton droit ;)
24/03/2009, 22h50
emmanuel.remy

Citation:

Envoyé par Auteur

avec onmousedown (ou onmouseup) tu détectes le bouton cliqué, même le bouton droit ;)

Bien vu :oops: , et ce qui nous a fait nous poser la question c'est qu'il y avait le menu contextuel du navigateur qui se déclenche pour les copier-coller.
Ha! On aurait dû relever la tête dans le guidon !

ERE
25/03/2009, 06h45
andry.aime

Citation:

Envoyé par Auteur

avec onmousedown (ou onmouseup) tu détectes le bouton cliqué, même le bouton droit ;)

Oui mais j'ai pensé qu'avec le clic droite, on peut capturer l'évènement avec onmouseup mais le contenu du textarea reste encore inchanger donc pas d' intérêt , lors du clic sur coller, ce n'est pas le menu-contextuel qui capture cet évènement ?

Citation:

Envoyé par Walterbelo

Ben non, l'utilisation d'un timer n'est pas une usine à gaz :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<p>
Message
<form name="Myform">
<br>
<textarea name="textarea" cols="50" rows="10">
</textarea><br>
</p>
<p>
Nombre de caractères  <input type="text" name="nbCaractere">
</p>
</form>
<script type='text/javascript'>
onch("");	
function onch(txt) {
document.Myform.nbCaractere.value=txt.length.toString();
timer=setTimeout("onch(document.Myform.textarea.value)", 100); 	
}
</script>

J'ai écrit ce code dans ma JSP comme vous m'avez indiqué mais lorsque j'écris mon message dans le textarea le nombre de caractère ne s'affiche pas au fur et à mesur que j'écrit mon message.Voilà mon code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form name="Myform" action="http://localhost:8080/stage/Envoi" method="post">
 
                	<h2>Destinataire</h2>
                    <div class="paragraphe">
                    <p>Nom<input type="text" name="nomDestinataire" ></p>
                    <p>Prenom<input type="text" name="prenomDestinataire" ></p>
                    <p>Tél<input type="text" name="telDestinataire" ></p>
                    <SELECT name="seul" size="1" >
                    <OPTION VALUE="valeur1">Hela 
                    <OPTION VALUE="valeur2">Najla
                    </SELECT>	
                     <SELECT name="groupe" size="1" >
                    <OPTION VALUE="valeur1">Groupe1
                    <OPTION VALUE="valeur2">Groupe2
                    </SELECT>	
                    <input type="submit" name="groupe" rows="5" value="Consulter groupe" >
                    </div>
 
 
                	<h2>Message</h2>
                    <div class="paragraphe">
 
 
                        <textarea name="textarea" cols="60" rows="4"></textarea>
 
                    </div>
                    <h3>Nombre de caractères</h3>
                    <div class="paragraphe">
                     <input type="text" name="nbCaractère" >
 
                     <input type="submit" name="envoyer" rows="5" value="Envoyer">
 
                     </div>
 
        </form>
<script type='text/javascript'>
onch("");	
function onch(txt) {
document.Myform.nbCaractere.value=txt.length.toString();
timer=setTimeout("onch(document.Myform.textarea.value)", 100); 	
}
</script>
 
</body>
</html>

25/03/2009, 23h06
Walterbelo

hello,

Vous avez nommé le champ qui reçoit le nombre de caractères

Code:

<input type="text" name="nbCaractère" >

avec l'accent grave alors que dans mon script il n'y a pas d'accent.

Code:

document.Myform.nbCaractere.value=txt.length.toString();

Un accent
en trop ou en moins
Tout fout l'camp
Avec l'eau du bain
26/03/2009, 14h51
minos23

Merci beaucoup ça marche bien maintenant :yaisse2:t