Discussion :

[minos23]

J'ai une page JSP qui contient un textarea et une zone text:

Code :

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

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.

[razbitume]

Essaye ça :

Code :

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

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

[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 :

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

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

[emmanuel.remy]

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

ERE

[andry.aime]

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

[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

[minos23]

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 :

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

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

[emmanuel.remy]

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 :

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

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

ERE

[Walterbelo]

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

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
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>

[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.

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

[Auteur]

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

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

[emmanuel.remy]

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

Bien vu , 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

[andry.aime]

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 ?

[minos23]

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

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
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 :

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
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>

[Walterbelo]

hello,

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

Code :

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

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

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

Code :

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

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

Un accent
en trop ou en moins
Tout fout l'camp
Avec l'eau du bain

[minos23]

Merci beaucoup ça marche bien maintenant t