inputTextArea avec du Javascript

Version imprimable

Bonjour,

J'ai un formulaire qui contient un inputtextarea auquel je veux ajouter un control et afficher dans un outputtext ou outputbox le résultat de la fonction javascript que j'ai développé.

voici mon code *.xhtml

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
 
 
// dans le head on ajoute ceci
<script type='text/javascript' src='js/custom.js'></script> 
 
<h:form title="message" id="message" onsubmit="verifcaract()">
                                        <p:growl id="growl" showDetail="true" sticky="true" /> 
                                        <p:panel header="Parametres SMS" id="panel1">  
                                            <h:panelGrid columns="2">  
                                                <h:outputText value="Entète SMS " />  
                                                <p:inputText id="entete" maxlength="11" value="#{bulk1.header}"/>  
                                                <h:outputText value="Affectation User  " />  
                                                <p:selectOneMenu value="#{bulk1.user}">  
                                                    <f:selectItem itemLabel="choisissez votre societé" itemValue="" /> 
                                                    <f:selectItem itemLabel="somatel" itemValue="somatel" />  
                                                    <f:selectItem itemLabel="Syscomedia" itemValue="syscomedia" />  
                                                    <f:selectItem itemLabel="Option 3" itemValue="Option3" />
                                                </p:selectOneMenu>  
                                                <h:outputText  value="Texte SMS " />  
                                                <p:inputTextarea title="Text" id="Text" rows="4" cols="60" value="#{bulk1.msg}" onkeyup="updateTextBoxCounter()" >  
 
                                                </p:inputTextarea>  
 </h:panelGrid> 
                                        </p:panel>  <br/><br/>
</h:form>

voici le code javascript adéquat:ce code permet de dire si le texte saisie dans inputtextarea sera envoyé sur 1 SMS ou n sms

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
 
 
	function restrictCharacters() {
		if (!e)
			var e = window.event
		if (e.keyCode)
			code = e.keyCode;
		else if (e.which)
			code = e.which;
		var character = String.fromCharCode(code);
 
		// if they pressed esc... remove focus from field...
		if (code == 13) {
			this.blur();
			return false;
		}
		// ignore if they are press other keys
		// strange because code: 39 is the down key AND ' key...
		// and DEL also equals .
		if (!e.ctrlKey && code != 9 && code != 8 && code != 36 && code != 37
				&& code != 38
				&& (code != 39 || (code == 39 && character == "'"))
				&& code != 40) {
			if (character.match(restrictionType)) {
				return true;
			} else {
				return false;
			}
		}
	}
 
 
	function updateTextBoxCounter() {
		var unicodeFlag = 0;
		var extraChars = 0;
		var msgCount = 0;
 
		for ( var i = 0; (!unicodeFlag && (i < document.message.Text.value.length)); i++) {
			if ((document.message.Text.value.charAt(i) >= '0')
					&& (document.message.Text.value.charAt(i) <= '9')) {
			} else if ((document.message.Text.value.charAt(i) >= 'A')
					&& (document.message.Text.value.charAt(i) <= 'Z')) {
			} else if ((document.message.Text.value.charAt(i) >= 'a')
					&& (document.message.Text.value.charAt(i) <= 'z')) {
			} else if (document.message.Text.value.charAt(i) == '@') {
			} else if (document.message.Text.value.charCodeAt(i) == 0xA3) {
			} else if (document.message.Text.value.charAt(i) == '$') {
			} else if (document.message.Text.value.charCodeAt(i) == 0xA5) {
			} else if (document.message.Text.value.charCodeAt(i) == 0xE8) {
			} else if (document.message.Text.value.charCodeAt(i) == 0xE9) {
			} else if (document.message.Text.value.charCodeAt(i) == 0xF9) {
			} else if (document.message.Text.value.charCodeAt(i) == 0xEC) {
			} else if (document.message.Text.value.charCodeAt(i) == 0xF2) {
			} else if (document.message.Text.value.charCodeAt(i) == 0xC7) {
			} else if (document.message.Text.value.charAt(i) == '\r') {
			} else if (document.message.Text.value.charAt(i) == '\n') {
			} else if (document.message.Text.value.charCodeAt(i) == 0xD8) {
			} else if (document.message.Text.value.charCodeAt(i) == 0xF8) {
			} else if (document.message.Text.value.charCodeAt(i) == 0xC5) {
			} else if (document.message.Text.value.charCodeAt(i) == 0xE5) {
			} else if (document.message.Text.value.charCodeAt(i) == 0x394) {
			} else if (document.message.Text.value.charAt(i) == '_') {
			} else if (document.message.Text.value.charCodeAt(i) == 0x3A6) {
			} else if (document.message.Text.value.charCodeAt(i) == 0x393) {
			} else if (document.message.Text.value.charCodeAt(i) == 0x39B) {
			} else if (document.message.Text.value.charCodeAt(i) == 0x3A9) {
			} else if (document.message.Text.value.charCodeAt(i) == 0x3A0) {
			} else if (document.message.Text.value.charCodeAt(i) == 0x3A8) {
			} else if (document.message.Text.value.charCodeAt(i) == 0x3A3) {
			} else if (document.message.Text.value.charCodeAt(i) == 0x398) {
			} else if (document.message.Text.value.charCodeAt(i) == 0x39E) {
			} else if (document.message.Text.value.charCodeAt(i) == 0xC6) {
			} else if (document.message.Text.value.charCodeAt(i) == 0xE6) {
			} else if (document.message.Text.value.charCodeAt(i) == 0xDF) {
			} else if (document.message.Text.value.charCodeAt(i) == 0xC9) {
			} else if (document.message.Text.value.charAt(i) == ' ') {
			} else if (document.message.Text.value.charAt(i) == '!') {
			} else if (document.message.Text.value.charAt(i) == '\"') {
			} else if (document.message.Text.value.charAt(i) == '#') {
			} else if (document.message.Text.value.charCodeAt(i) == 0xA4) {
			} else if (document.message.Text.value.charAt(i) == '%') {
			} else if (document.message.Text.value.charAt(i) == '&') {
			} else if (document.message.Text.value.charAt(i) == '\'') {
			} else if (document.message.Text.value.charAt(i) == '(') {
			} else if (document.message.Text.value.charAt(i) == ')') {
			} else if (document.message.Text.value.charAt(i) == '*') {
			} else if (document.message.Text.value.charAt(i) == '+') {
			} else if (document.message.Text.value.charAt(i) == ',') {
			} else if (document.message.Text.value.charAt(i) == '-') {
			} else if (document.message.Text.value.charAt(i) == '.') {
			} else if (document.message.Text.value.charAt(i) == '/') {
			} else if (document.message.Text.value.charAt(i) == ':') {
			} else if (document.message.Text.value.charAt(i) == ';') {
			} else if (document.message.Text.value.charAt(i) == '<') {
			} else if (document.message.Text.value.charAt(i) == '=') {
			} else if (document.message.Text.value.charAt(i) == '>') {
			} else if (document.message.Text.value.charAt(i) == '?') {
			} else if (document.message.Text.value.charCodeAt(i) == 0xA1) {
			} else if (document.message.Text.value.charCodeAt(i) == 0xC4) {
			} else if (document.message.Text.value.charCodeAt(i) == 0xD6) {
			} else if (document.message.Text.value.charCodeAt(i) == 0xD1) {
			} else if (document.message.Text.value.charCodeAt(i) == 0xDC) {
			} else if (document.message.Text.value.charCodeAt(i) == 0xA7) {
			} else if (document.message.Text.value.charCodeAt(i) == 0xBF) {
			} else if (document.message.Text.value.charCodeAt(i) == 0xE4) {
			} else if (document.message.Text.value.charCodeAt(i) == 0xF6) {
			} else if (document.message.Text.value.charCodeAt(i) == 0xF1) {
			} else if (document.message.Text.value.charCodeAt(i) == 0xFC) {
			} else if (document.message.Text.value.charCodeAt(i) == 0xE0) {
			} else if (document.message.Text.value.charCodeAt(i) == 0x391) {
			} else if (document.message.Text.value.charCodeAt(i) == 0x392) {
			} else if (document.message.Text.value.charCodeAt(i) == 0x395) {
			} else if (document.message.Text.value.charCodeAt(i) == 0x396) {
			} else if (document.message.Text.value.charCodeAt(i) == 0x397) {
			} else if (document.message.Text.value.charCodeAt(i) == 0x399) {
			} else if (document.message.Text.value.charCodeAt(i) == 0x39A) {
			} else if (document.message.Text.value.charCodeAt(i) == 0x39C) {
			} else if (document.message.Text.value.charCodeAt(i) == 0x39D) {
			} else if (document.message.Text.value.charCodeAt(i) == 0x39F) {
			} else if (document.message.Text.value.charCodeAt(i) == 0x3A1) {
			} else if (document.message.Text.value.charCodeAt(i) == 0x3A4) {
			} else if (document.message.Text.value.charCodeAt(i) == 0x3A5) {
			} else if (document.message.Text.value.charCodeAt(i) == 0x3A7) {
			} else if (document.message.Text.value.charAt(i) == '^') {
				extraChars++;
				document.write("Containts special characters. \n These are not allowed.\n Please remove them and try again.");
			} else if (document.message.Text.value.charAt(i) == '{') {
				extraChars++;
			} else if (document.message.Text.value.charAt(i) == '}') {
				extraChars++;
 
				document.write("Containts special characters. \n These are not allowed.\n Please remove them and try again.");
			} else if (document.message.Text.value.charAt(i) == '\\') {
				extraChars++;
			} else if (document.message.Text.value.charAt(i) == '[') {
				extraChars++;
			} else if (document.message.Text.value.charAt(i) == '~') {
				extraChars++;
			} else if (document.message.Text.value.charAt(i) == ']') {
				extraChars++;
			} else if (document.message.Text.value.charAt(i) == '|') {
				extraChars++;
			} else if (document.message.Text.value.charCodeAt(i) == 0x20AC) {
				extraChars++;
			} else {
				unicodeFlag = 1;
			}
		}
		if (unicodeFlag) {
			msgCount = document.message.Text.value.length;
			if (msgCount <= 70) {
				msgCount = 1;
			} else {
				msgCount += (63 - 1);
				msgCount -= (msgCount % 63);
				msgCount /= 63;
			}
			document.message.InfoCharCounter.value = ""
					+ document.message.Text.value.length
					+ " unicode characters, " + msgCount + " SMS message(s)";
		} else {
			msgCount = document.message.Text.value.length + extraChars;
			if (msgCount <= 160) {
				msgCount = 1;
			} else {
				msgCount += (153 - 1);
				msgCount -= (msgCount % 153);
				msgCount /= 153;
			}
			document.message.InfoCharCounter.value = ""+ (document.message.Text.value.length + extraChars)
					+ " characters, " + msgCount + " SMS message(s)";
		}
	}
	function clearTextBoxCounter() {
		document.message.InfoCharCounter.value = "";
	}

comment ferais je pour que lorsque je tape un texte il m'affiche le résultat du javascript ??
merci

Si tu mets un id à ton outputText, rien ne t'empêche de l'utiliser
Code:

1 2 3 4 5 6 7 8 ... <h:outputText id="txt1" value=""/> ... <script> document.getElementById("txt1").innerHTML = "Test"; </script>

ou aussi le gerer au niveau de ta bean:
au lieu de

Code:

<h:outputText value="Texte SMS " />

tu fais

Code:

<h:outputText value="#{builk1.textSMS}" />

et dans ta bean:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 private String textSMS; //dans le setter public void setMsg(String msg) { //.... et la fin this.textSMS = this.msg; } // sans oublier le setter et getter de testSMS
Eric

05/02/2014, 11h08
OButterlin

Ben non, c'est la fonction javascript qui fait le boulot, c'est à elle d'afficher le résultat...
Il y aurait accessoirement la possibilité de déporter le code vers un managedBean et d'utiliser <h:ajax> pour des appels à chaque caractère tapé et de rafraichir l'outputText mais c'est super lourd :calim2:

tout d'abord merci pour vos réponses
le code javascript fonctionne bien et je l'ai déjà testé sur une page jsp mais en essayant de migrer vers jsf+primefaces, le inputtext n'affiche rien

pourtant j'ai mis les memes noms( form id=document , textarea id=Text)
pour le inputtext qui affiche le résultat je l'ai copier-coller juste après inputtextarea

Code:

<input type="TEXT" size="18" name="InfoCharCounter" ></input>

InfoCounter contient le nombre de charactère (donné par javascript)
voici le code en jsp et ça fonctionne bien
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <form name="message" method=POST onSubmit="return verifcaract()"> <table> <tr width= "100%"> <td colspan="2" width= "100%"> <textarea name="Text" onKeyUp="updateTextBoxCounter()" style="height: 100px; width: 100%; font-family: Arial; font-size: 12px;"></textarea> </td> </tr> <tr> <td> <input type="TEXT" size="38" name="InfoCharCounter"> </td> </tr> <tr> </tr> </table> </form>
je suis bloqué là j'arrive pas à determiner le problème
:? :?

05/02/2014, 15h27
OButterlin

Pour utiliser un "document.getElementById(...)", il faut mettre un attribut "id" à ton champ, pas "name"...
Pourquoi mixes-tu le code html avec les bibliothèques <h:outputText> etc... ?

As-tu essayé mon exemple ?
Il y a un petit truc à rajouter quand ton champ est dans un formulaire, la balise <h:outputText> va rajouter l'id du formulaire devant, tu auras donc "idFormulaire:idChamp"

j´ai essayé de faire un bazard qui marche meme si je sais que ce n´est pas la bonne maniere.

code javascript:

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
function updateTextBoxCounter(textAreaInput, form) {
 
		var unicodeFlag = 0;
		var extraChars = 0;
		var msgCount = 0;
 
		for ( var i = 0; (!unicodeFlag && (i < textAreaInput.value.length)); i++) {
			if ((textAreaInput.value.charAt(i) >= '0')
					&& (textAreaInput.value.charAt(i) <= '9')) {
			} else if ((textAreaInput.value.charAt(i) >= 'A')
					&& (textAreaInput.value.charAt(i) <= 'Z')) {
			} else if ((textAreaInput.value.charAt(i) >= 'a')
					&& (textAreaInput.value.charAt(i) <= 'z')) {
			} else if (textAreaInput.value.charAt(i) == '@') {
			} else if (textAreaInput.value.charCodeAt(i) == 0xA3) {
			} else if (textAreaInput.value.charAt(i) == '$') {
			} else if (textAreaInput.value.charCodeAt(i) == 0xA5) {
			} else if (textAreaInput.value.charCodeAt(i) == 0xE8) {
			} else if (textAreaInput.value.charCodeAt(i) == 0xE9) {
			} else if (textAreaInput.value.charCodeAt(i) == 0xF9) {
			} else if (textAreaInput.value.charCodeAt(i) == 0xEC) {
			} else if (textAreaInput.value.charCodeAt(i) == 0xF2) {
			} else if (textAreaInput.value.charCodeAt(i) == 0xC7) {
			} else if (textAreaInput.value.charAt(i) == '\r') {
			} else if (textAreaInput.value.charAt(i) == '\n') {
			} else if (textAreaInput.value.charCodeAt(i) == 0xD8) {
			} else if (textAreaInput.value.charCodeAt(i) == 0xF8) {
			} else if (textAreaInput.value.charCodeAt(i) == 0xC5) {
			} else if (textAreaInput.value.charCodeAt(i) == 0xE5) {
			} else if (textAreaInput.value.charCodeAt(i) == 0x394) {
			} else if (textAreaInput.value.charAt(i) == '_') {
			} else if (textAreaInput.value.charCodeAt(i) == 0x3A6) {
			} else if (textAreaInput.value.charCodeAt(i) == 0x393) {
			} else if (textAreaInput.value.charCodeAt(i) == 0x39B) {
			} else if (textAreaInput.value.charCodeAt(i) == 0x3A9) {
			} else if (textAreaInput.value.charCodeAt(i) == 0x3A0) {
			} else if (textAreaInput.value.charCodeAt(i) == 0x3A8) {
			} else if (textAreaInput.value.charCodeAt(i) == 0x3A3) {
			} else if (textAreaInput.value.charCodeAt(i) == 0x398) {
			} else if (textAreaInput.value.charCodeAt(i) == 0x39E) {
			} else if (textAreaInput.value.charCodeAt(i) == 0xC6) {
			} else if (textAreaInput.value.charCodeAt(i) == 0xE6) {
			} else if (textAreaInput.value.charCodeAt(i) == 0xDF) {
			} else if (textAreaInput.value.charCodeAt(i) == 0xC9) {
			} else if (textAreaInput.value.charAt(i) == ' ') {
			} else if (textAreaInput.value.charAt(i) == '!') {
			} else if (textAreaInput.value.charAt(i) == '\"') {
			} else if (textAreaInput.value.charAt(i) == '#') {
			} else if (textAreaInput.value.charCodeAt(i) == 0xA4) {
			} else if (textAreaInput.value.charAt(i) == '%') {
			} else if (textAreaInput.value.charAt(i) == '&') {
			} else if (textAreaInput.value.charAt(i) == '\'') {
			} else if (textAreaInput.value.charAt(i) == '(') {
			} else if (textAreaInput.value.charAt(i) == ')') {
			} else if (textAreaInput.value.charAt(i) == '*') {
			} else if (textAreaInput.value.charAt(i) == '+') {
			} else if (textAreaInput.value.charAt(i) == ',') {
			} else if (textAreaInput.value.charAt(i) == '-') {
			} else if (textAreaInput.value.charAt(i) == '.') {
			} else if (textAreaInput.value.charAt(i) == '/') {
			} else if (textAreaInput.value.charAt(i) == ':') {
			} else if (textAreaInput.value.charAt(i) == ';') {
			} else if (textAreaInput.value.charAt(i) == '<') {
			} else if (textAreaInput.value.charAt(i) == '=') {
			} else if (textAreaInput.value.charAt(i) == '>') {
			} else if (textAreaInput.value.charAt(i) == '?') {
			} else if (textAreaInput.value.charCodeAt(i) == 0xA1) {
			} else if (textAreaInput.value.charCodeAt(i) == 0xC4) {
			} else if (textAreaInput.value.charCodeAt(i) == 0xD6) {
			} else if (textAreaInput.value.charCodeAt(i) == 0xD1) {
			} else if (textAreaInput.value.charCodeAt(i) == 0xDC) {
			} else if (textAreaInput.value.charCodeAt(i) == 0xA7) {
			} else if (textAreaInput.value.charCodeAt(i) == 0xBF) {
			} else if (textAreaInput.value.charCodeAt(i) == 0xE4) {
			} else if (textAreaInput.value.charCodeAt(i) == 0xF6) {
			} else if (textAreaInput.value.charCodeAt(i) == 0xF1) {
			} else if (textAreaInput.value.charCodeAt(i) == 0xFC) {
			} else if (textAreaInput.value.charCodeAt(i) == 0xE0) {
			} else if (textAreaInput.value.charCodeAt(i) == 0x391) {
			} else if (textAreaInput.value.charCodeAt(i) == 0x392) {
			} else if (textAreaInput.value.charCodeAt(i) == 0x395) {
			} else if (textAreaInput.value.charCodeAt(i) == 0x396) {
			} else if (textAreaInput.value.charCodeAt(i) == 0x397) {
			} else if (textAreaInput.value.charCodeAt(i) == 0x399) {
			} else if (textAreaInput.value.charCodeAt(i) == 0x39A) {
			} else if (textAreaInput.value.charCodeAt(i) == 0x39C) {
			} else if (textAreaInput.value.charCodeAt(i) == 0x39D) {
			} else if (textAreaInput.value.charCodeAt(i) == 0x39F) {
			} else if (textAreaInput.value.charCodeAt(i) == 0x3A1) {
			} else if (textAreaInput.value.charCodeAt(i) == 0x3A4) {
			} else if (textAreaInput.value.charCodeAt(i) == 0x3A5) {
			} else if (textAreaInput.value.charCodeAt(i) == 0x3A7) {
			} else if (textAreaInput.value.charAt(i) == '^') {
				extraChars++;
				document.write("Containts special characters. \n These are not allowed.\n Please remove them and try again.");
			} else if (textAreaInput.value.charAt(i) == '{') {
				extraChars++;
			} else if (textAreaInput.value.charAt(i) == '}') {
				extraChars++;
 
				document.write("Containts special characters. \n These are not allowed.\n Please remove them and try again.");
			} else if (textAreaInput.value.charAt(i) == '\\') {
				extraChars++;
			} else if (textAreaInput.value.charAt(i) == '[') {
				extraChars++;
			} else if (textAreaInput.value.charAt(i) == '~') {
				extraChars++;
			} else if (textAreaInput.value.charAt(i) == ']') {
				extraChars++;
			} else if (textAreaInput.value.charAt(i) == '|') {
				extraChars++;
			} else if (textAreaInput.value.charCodeAt(i) == 0x20AC) {
				extraChars++;
			} else {
				unicodeFlag = 1;
			}
		}
 
		if (unicodeFlag) {
			msgCount = textAreaInput.value.length;
			if (msgCount <= 70) {
				msgCount = 1;
			} else {
				msgCount += (63 - 1);
				msgCount -= (msgCount % 63);
				msgCount /= 63;
			}
			/*document.message.InfoCharCounter.value = ""
					+ textAreaInput.value.length
					+ " unicode characters, " + msgCount + " SMS message(s)";*/
			form.elements[5].value =  ""
				+ textAreaInput.value.length
				+ " unicode characters, " + msgCount + " SMS message(s)";
		} else {
			msgCount = textAreaInput.value.length + extraChars;
			if (msgCount <= 160) {
				msgCount = 1;
			} else {
				msgCount += (153 - 1);
				msgCount -= (msgCount % 153);
				msgCount /= 153;
			}
			form.elements[5].value =""+ (textAreaInput.value.length + extraChars)
			+ " characters, " + msgCount + " SMS message(s)";
			/*document.message.InfoCharCounter.value = ""+ (textAreaInput.value.length + extraChars)
					+ " characters, " + msgCount + " SMS message(s)";*/
		}
	}
	function clearTextBoxCounter() {
		document.message.InfoCharCounter.value = "";
	}

et du cote de xhtml:

Code:

1
2
3
4
 
 <p:inputTextarea title="Text"  id="smstext" rows="4" cols="60" value="#{tableBean.msg}" onkeyup="updateTextBoxCounter(this, this.form)" >  
 
 <p:inputText  id="InfoCharCounter"  value="Valeur " />

eric

Bonjour
tout d'abord merci pour vos réponses.
J'ai essayé d'utiliser innerHTML au lieu de .value mais ça n'arien donné.
J'ai extré le code du textarea et du intputtext et je l'ai mis dans une nouvelle page de test mais ça ne marche pas non plus.

code .xhtml

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
 
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
 
 
    <h:head></h:head>
    <h:body>
 
    	<h1>JSF 2 outputScript example</h1>
 
    	<h:outputScript library="js" name="common.js" target="head" />
        <h:form id="message">
        <h:inputTextarea id="text" title="text" onkeyup="updatetextBoxCounter();"/>
        <br/>
        texte:<h:outputText id="InfoCharCounter" value="" /> 
 
 
        </h:form>
    </h:body>
 
</html>

et voici le code javascript

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
document.write('Testing');
//-----> affiche le mot testing en haut de la page 
 
function updatetextBoxCounter() {
		var unicodeFlag = 0;
		var extraChars = 0;
		var msgCount = 0;
 
		for ( var i = 0; (!unicodeFlag && (i < document.message.text.innerHTML.length)); i++) {
			if ((document.message.text.innerHTML.charAt(i) >= '0')
					&& (document.message.text.innerHTML.charAt(i) <= '9')) {
			} else if ((document.message.text.innerHTML.charAt(i) >= 'A')
					&& (document.message.text.innerHTML.charAt(i) <= 'Z')) {
			} else if ((document.message.text.innerHTML.charAt(i) >= 'a')
					&& (document.message.text.innerHTML.charAt(i) <= 'z')) {
			} else if (document.message.text.innerHTML.charAt(i) == '@') {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0xA3) {
			} else if (document.message.text.innerHTML.charAt(i) == '$') {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0xA5) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0xE8) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0xE9) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0xF9) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0xEC) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0xF2) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0xC7) {
			} else if (document.message.text.innerHTML.charAt(i) == '\r') {
			} else if (document.message.text.innerHTML.charAt(i) == '\n') {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0xD8) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0xF8) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0xC5) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0xE5) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0x394) {
			} else if (document.message.text.innerHTML.charAt(i) == '_') {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0x3A6) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0x393) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0x39B) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0x3A9) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0x3A0) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0x3A8) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0x3A3) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0x398) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0x39E) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0xC6) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0xE6) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0xDF) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0xC9) {
			} else if (document.message.text.innerHTML.charAt(i) == ' ') {
			} else if (document.message.text.innerHTML.charAt(i) == '!') {
			} else if (document.message.text.innerHTML.charAt(i) == '\"') {
			} else if (document.message.text.innerHTML.charAt(i) == '#') {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0xA4) {
			} else if (document.message.text.innerHTML.charAt(i) == '%') {
			} else if (document.message.text.innerHTML.charAt(i) == '&') {
			} else if (document.message.text.innerHTML.charAt(i) == '\'') {
			} else if (document.message.text.innerHTML.charAt(i) == '(') {
			} else if (document.message.text.innerHTML.charAt(i) == ')') {
			} else if (document.message.text.innerHTML.charAt(i) == '*') {
			} else if (document.message.text.innerHTML.charAt(i) == '+') {
			} else if (document.message.text.innerHTML.charAt(i) == ',') {
			} else if (document.message.text.innerHTML.charAt(i) == '-') {
			} else if (document.message.text.innerHTML.charAt(i) == '.') {
			} else if (document.message.text.innerHTML.charAt(i) == '/') {
			} else if (document.message.text.innerHTML.charAt(i) == ':') {
			} else if (document.message.text.innerHTML.charAt(i) == ';') {
			} else if (document.message.text.innerHTML.charAt(i) == '<') {
			} else if (document.message.text.innerHTML.charAt(i) == '=') {
			} else if (document.message.text.innerHTML.charAt(i) == '>') {
			} else if (document.message.text.innerHTML.charAt(i) == '?') {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0xA1) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0xC4) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0xD6) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0xD1) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0xDC) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0xA7) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0xBF) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0xE4) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0xF6) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0xF1) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0xFC) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0xE0) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0x391) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0x392) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0x395) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0x396) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0x397) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0x399) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0x39A) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0x39C) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0x39D) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0x39F) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0x3A1) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0x3A4) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0x3A5) {
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0x3A7) {
			} else if (document.message.text.innerHTML.charAt(i) == '^') {
				extraChars++;
				document.write("Containts special characters. \n These are not allowed.\n Please remove them and try again.");
			} else if (document.message.text.innerHTML.charAt(i) == '{') {
				extraChars++;
			} else if (document.message.text.innerHTML.charAt(i) == '}') {
				extraChars++;
 
				document.write("Containts special characters. \n These are not allowed.\n Please remove them and try again.");
			} else if (document.message.text.innerHTML.charAt(i) == '\\') {
				extraChars++;
			} else if (document.message.text.innerHTML.charAt(i) == '[') {
				extraChars++;
			} else if (document.message.text.innerHTML.charAt(i) == '~') {
				extraChars++;
			} else if (document.message.text.innerHTML.charAt(i) == ']') {
				extraChars++;
			} else if (document.message.text.innerHTML.charAt(i) == '|') {
				extraChars++;
			} else if (document.message.text.innerHTML.charCodeAt(i) == 0x20AC) {
				extraChars++;
			} else {
				unicodeFlag = 1;
			}
		}
		if (unicodeFlag) {
			msgCount = document.message.text.innerHTML.length;
			if (msgCount <= 70) {
				msgCount = 1;
			} else {
				msgCount += (63 - 1);
				msgCount -= (msgCount % 63);
				msgCount /= 63;
			}
			document.message.InfoCharCounter.innerHTML = ""
					+ document.message.text.innerHTML.length
					+ " unicode characters, " + msgCount + " SMS message(s)";
		} else {
			msgCount = document.message.text.innerHTML.length + extraChars;
			if (msgCount <= 160) {
				msgCount = 1;
			} else {
				msgCount += (153 - 1);
				msgCount -= (msgCount % 153);
				msgCount /= 153;
			}
			document.message.InfoCharCounter.innerHTML = ""+ (document.message.text.innerHTML.length + extraChars)
					+ " characters, " + msgCount + " SMS message(s)";
		}
	}
	function cleartextBoxCounter() {
		document.message.InfoCharCounter.innerHTML = "";
	}
        function testCounter() {
 
		document.message.InfoCharCounter.innerHTML = "125";
	}

merci

là

Code:

1
2
document.message.InfoCharCounter.innerHTML = ""                     + document.message.text.innerHTML.length                     + " unicode characters, " + msgCount + " SMS message(s)";

ça devrait être

Code:

document.getElementById("message:InfoCharCounter").innerHTML = ...

merci pour votre réponse maintenant le code javascript est accessible mais le problème c'est que j'ai toujours comme affichage
0 characters, 1 SMS message(s).
Le composant responsable de l'affichage du text ne prend pas en charge les changement du inputTextarea.J'ai ajouté du ajax mais je ne sais pas comment le faire.
on a testé avec

Code:

<p:ajax event="keyup" >

mais ça n'a rien donné
voici mon code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<h:form id="message" >
 
            <p:panel header="Parametres " id="panel1">  
                <h:panelGrid columns="2" id="panelgrid2">  
 
 
                    <h:outputText  value="Texte " />  
                    <p:inputTextarea title="Text" id="Text" rows="4" cols="60" value="#{bean.msg}" onkeyup="updateTextBoxCounter()" >  
                        <p:ajax event="change" immediate="true"
                            update=":message:InfoCharCounter" />
                    </p:inputTextarea> 
 
                    nbre msg: <h:outputText id="InfoCharCounter" rendered="true" value=""/>
 
                    <br/><br/>
 
                </h:panelGrid> 
            </p:panel> 
 
        </h:form>

J'ai essayé ceci aussi

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
 <h:form id="message" >
 
            <p:panel header="Parametres " id="panel1">  
                <h:panelGrid columns="2" id="panelgrid2">  
 
<h:outputText  value="Texte  " />  
                    <p:inputTextarea title="Text" id="Text" rows="4" cols="60" value="#{bean.msg}" onkeyup="updateTextBoxCounter()" >  
                        <p:ajax event="change" immediate="true" 
                            update=":message:panel3" />
                    </p:inputTextarea> 
                    </h:panelGrid> 
 
                    <h:panelGrid columns="3">
 
                    <h:panelGrid columns="2" id="panel3">
                        nbre msg: <h:outputText id="InfoCharCounter" rendered="true" value=""/>
 
 
                    </h:panelGrid>
                </h:panelGrid>

mais j'ai toujours le meme affichage: 0caractères

Inspire toi de ceci (qui fonctionne)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<h:form id="form1">
    <p:inputTextarea id="remarque" value="#{monBean.remarque}" onkeyup="return countNumber(event)"/>
    <h:outputText id="count" value=""/>
</h:form>
 
<script>
function countNumber(event)
{
    document.getElementById("form1:count").innerHTML = document.getElementById("form1:remarque").value.length;
    return true;
}
</script>

12/02/2014, 12h21
stoner2008

merci pour votre réponse,
oui votre code fonctionne bien mais Je ne trouve pas pourquoi le mien ne fonctionne pas.
Le code JS fonctionne bien vu que lorsque je recharge la page, il m'affiche le véritable nombre de caractère mais lorsque je tape mon texte rien ne se produit.On dirait que le outputtext n'est mise à jour que lors du rechargement de la page.J'ai essayé avec ajax mais ça n'a rien changé.
:(:(
12/02/2014, 14h23
OButterlin

Je peux voir le code complet de la page et du javascript ?

voivi le code javascript:countmsg.js

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
 
/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
 
 
	function restrictCharacters() {
		if (!e)
			var e = window.event
		if (e.keyCode)
			code = e.keyCode;
		else if (e.which)
			code = e.which;
		var character = String.fromCharCode(code);
 
		// if they pressed esc... remove focus from field...
		if (code == 13) {
			this.blur();
			return false;
		}
		// ignore if they are press other keys
		// strange because code: 39 is the down key AND ' key...
		// and DEL also equals .
		if (!e.ctrlKey && code != 9 && code != 8 && code != 36 && code != 37
				&& code != 38
				&& (code != 39 || (code == 39 && character == "'"))
				&& code != 40) {
			if (character.match(restrictionType)) {
				return true;
			} else {
				return false;
			}
		}
	}
 
 
	function updateTextBoxCounter() {
		var unicodeFlag = 0;
		var extraChars = 0;
		var msgCount = 0;
 
		for ( var i = 0; (!unicodeFlag && (i < document.getElementById("message:Text").innerHTML.length)); i++) {
			if ((document.getElementById("message:Text").innerHTML.charAt(i) >= '0')
					&& (document.getElementById("message:Text").innerHTML.charAt(i) <= '9')) {
			} else if ((document.getElementById("message:Text").innerHTML.charAt(i) >= 'A')
					&& (document.getElementById("message:Text").innerHTML.charAt(i) <= 'Z')) {
			} else if ((document.getElementById("message:Text").innerHTML.charAt(i) >= 'a')
					&& (document.getElementById("message:Text").innerHTML.charAt(i) <= 'z')) {
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == '@') {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0xA3) {
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == '$') {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0xA5) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0xE8) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0xE9) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0xF9) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0xEC) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0xF2) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0xC7) {
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == '\r') {
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == '\n') {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0xD8) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0xF8) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0xC5) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0xE5) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0x394) {
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == '_') {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0x3A6) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0x393) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0x39B) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0x3A9) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0x3A0) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0x3A8) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0x3A3) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0x398) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0x39E) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0xC6) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0xE6) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0xDF) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0xC9) {
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == ' ') {
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == '!') {
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == '\"') {
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == '#') {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0xA4) {
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == '%') {
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == '&') {
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == '\'') {
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == '(') {
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == ')') {
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == '*') {
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == '+') {
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == ',') {
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == '-') {
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == '.') {
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == '/') {
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == ':') {
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == ';') {
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == '<') {
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == '=') {
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == '>') {
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == '?') {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0xA1) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0xC4) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0xD6) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0xD1) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0xDC) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0xA7) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0xBF) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0xE4) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0xF6) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0xF1) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0xFC) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0xE0) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0x391) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0x392) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0x395) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0x396) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0x397) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0x399) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0x39A) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0x39C) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0x39D) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0x39F) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0x3A1) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0x3A4) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0x3A5) {
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0x3A7) {
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == '^') {
				extraChars++;
				document.write("Containts special characters. \n These are not allowed.\n Please remove them and try again.");
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == '{') {
				extraChars++;
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == '}') {
				extraChars++;
 
				document.write("Containts special characters. \n These are not allowed.\n Please remove them and try again.");
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == '\\') {
				extraChars++;
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == '[') {
				extraChars++;
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == '~') {
				extraChars++;
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == ']') {
				extraChars++;
			} else if (document.getElementById("message:Text").innerHTML.charAt(i) == '|') {
				extraChars++;
			} else if (document.getElementById("message:Text").innerHTML.charCodeAt(i) == 0x20AC) {
				extraChars++;
			} else {
				unicodeFlag = 1;
			}
		}
		if (unicodeFlag) {
			msgCount = document.getElementById("message:Text").innerHTML.length;
			if (msgCount <= 70) {
				msgCount = 1;
			} else {
				msgCount += (63 - 1);
				msgCount -= (msgCount % 63);
				msgCount /= 63;
                                //****
 
			}
			document.getElementById("message:InfoCharCounter").innerHTML = ""
					+ document.getElementById("message:Text").innerHTML.length
					+ " unicode characters, " + msgCount + " SMS message(s)";
                                return true;
		} else {
			msgCount = document.getElementById("message:Text").innerHTML.length + extraChars;
			if (msgCount <= 159) {
				msgCount = 1;
			} else {
				msgCount += (152 - 1);
				msgCount -= (msgCount % 152);
				msgCount /= 152;
			}
			document.getElementById("message:InfoCharCounter").innerHTML = ""+ (document.getElementById("message:Text").innerHTML.length + extraChars)
					+ " characters, " + msgCount + " SMS message(s)";
                                return true;
		}
	}
	function clearTextBoxCounter() {
		document.getElementById("message:InfoCharCounter").innerHTML = "";
                return true;
	}

et voici ma page jsf

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
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
 
    <h:head>
        <title> test js</title>
 
 <h:outputScript name="countmsg.js" />
 
 
    </h:head>
    <h:body>
 <h:form id="message" >
 
            <p:panel header="Parametres " id="panel1">  
                <h:panelGrid columns="2" id="panelgrid2">  
<h:outputText  value="Texte SMS " />  
                    <p:inputTextarea title="Text" id="Text" rows="4" cols="60" value="#{javaBean.msg}"  onkeyup="updateTextBoxCounter()" >  
                        <p:ajax  update=":message:panel3" /> -->
                    </p:inputTextarea> 
 
                </h:panelGrid> 
 
            <h:panelGrid columns="2" id="panel3">
                    nbre msg:
            <p:outputLabel id="InfoCharCounter" value="" />
 
                <!-- <h:panelGrid columns="3"> -->
 
 
                           </h:panelGrid>
 
            </p:panel>       <br/><br/>
</h:form>
 </h:body>
 
</html>

J'ai fait un test sur la base de ton code (légèrement modifié) et ça fonctionne
Code de la page (j'ai placé le fichier js dans un sous-répertoire "javascript" de "resources", d'où le library="javascript"

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
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

<h:head>
    <title>test js</title>

    <h:outputScript library="javascript" name="divers.js" />

</h:head>
<h:body>
    <h:form id="message">

        <p:panel header="Parametres " id="panel1">
            <h:panelGrid columns="2" id="panelgrid2">
                <h:outputText value="Texte SMS " />
                <p:inputTextarea title="Text" id="Text" rows="4" cols="60"
                    value="#{javaBean.msg}" onkeyup="updateTextBoxCounter()"/>

            </h:panelGrid>

            <h:panelGrid columns="2" id="panel3">
                    nbre msg:
            <p:outputLabel id="InfoCharCounter" value="" />

            </h:panelGrid>

        </p:panel>
        <br />
        <br />
    </h:form>
    
</h:body>
</html>

Code du javascript

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
 
/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
 
 
    function restrictCharacters(evt) {
        var e = evt;
        if (!e)
            e = window.event;
        if (e.keyCode)
            code = e.keyCode;
        else if (e.which)
            code = e.which;
        var character = String.fromCharCode(code);
 
        // if they pressed esc... remove focus from field...
        if (code == 13) {
            this.blur();
            return false;
        }
 
        // ignore if they are press other keys
        // strange because code: 39 is the down key AND ' key...
        // and DEL also equals .
        if (e.ctrlKey == false 
                && code != 9 
                && code != 8 
                && code != 36 
                && code != 37
                && code != 38
                && (code != 39 || (code == 39 && character == "'"))
                && code != 40) {
            if (character.match(restrictionType)) {
                return true;
            } else {
                return false;
            }
        }
    }
 
 
    function updateTextBoxCounter() {
        var unicodeFlag = 0;
        var extraChars = 0;
        var msgCount = 0;
 
        var textField = document.getElementById("message:Text");
        var textValue = textField.value;
 
        for ( var i = 0; (!unicodeFlag && (i < textValue.length)); i++) 
        {
            if ((textValue.charAt(i) >= '0') && (textValue.charAt(i) <= '9')) {
            } else if ((textValue.charAt(i) >= 'A') && (textValue.charAt(i) <= 'Z')) {
            } else if ((textValue.charAt(i) >= 'a') && (textValue.charAt(i) <= 'z')) {
            } else if (textValue.charAt(i) == '@') {
            } else if (textValue.charCodeAt(i) == 0xA3) {
            } else if (textValue.charAt(i) == '$') {
            } else if (textValue.charCodeAt(i) == 0xA5) {
            } else if (textValue.charCodeAt(i) == 0xE8) {
            } else if (textValue.charCodeAt(i) == 0xE9) {
            } else if (textValue.charCodeAt(i) == 0xF9) {
            } else if (textValue.charCodeAt(i) == 0xEC) {
            } else if (textValue.charCodeAt(i) == 0xF2) {
            } else if (textValue.charCodeAt(i) == 0xC7) {
            } else if (textValue.charAt(i) == '\r') {
            } else if (textValue.charAt(i) == '\n') {
            } else if (textValue.charCodeAt(i) == 0xD8) {
            } else if (textValue.charCodeAt(i) == 0xF8) {
            } else if (textValue.charCodeAt(i) == 0xC5) {
            } else if (textValue.charCodeAt(i) == 0xE5) {
            } else if (textValue.charCodeAt(i) == 0x394) {
            } else if (textValue.charAt(i) == '_') {
            } else if (textValue.charCodeAt(i) == 0x3A6) {
            } else if (textValue.charCodeAt(i) == 0x393) {
            } else if (textValue.charCodeAt(i) == 0x39B) {
            } else if (textValue.charCodeAt(i) == 0x3A9) {
            } else if (textValue.charCodeAt(i) == 0x3A0) {
            } else if (textValue.charCodeAt(i) == 0x3A8) {
            } else if (textValue.charCodeAt(i) == 0x3A3) {
            } else if (textValue.charCodeAt(i) == 0x398) {
            } else if (textValue.charCodeAt(i) == 0x39E) {
            } else if (textValue.charCodeAt(i) == 0xC6) {
            } else if (textValue.charCodeAt(i) == 0xE6) {
            } else if (textValue.charCodeAt(i) == 0xDF) {
            } else if (textValue.charCodeAt(i) == 0xC9) {
            } else if (textValue.charAt(i) == ' ') {
            } else if (textValue.charAt(i) == '!') {
            } else if (textValue.charAt(i) == '\"') {
            } else if (textValue.charAt(i) == '#') {
            } else if (textValue.charCodeAt(i) == 0xA4) {
            } else if (textValue.charAt(i) == '%') {
            } else if (textValue.charAt(i) == '&') {
            } else if (textValue.charAt(i) == '\'') {
            } else if (textValue.charAt(i) == '(') {
            } else if (textValue.charAt(i) == ')') {
            } else if (textValue.charAt(i) == '*') {
            } else if (textValue.charAt(i) == '+') {
            } else if (textValue.charAt(i) == ',') {
            } else if (textValue.charAt(i) == '-') {
            } else if (textValue.charAt(i) == '.') {
            } else if (textValue.charAt(i) == '/') {
            } else if (textValue.charAt(i) == ':') {
            } else if (textValue.charAt(i) == ';') {
            } else if (textValue.charAt(i) == '<') {
            } else if (textValue.charAt(i) == '=') {
            } else if (textValue.charAt(i) == '>') {
            } else if (textValue.charAt(i) == '?') {
            } else if (textValue.charCodeAt(i) == 0xA1) {
            } else if (textValue.charCodeAt(i) == 0xC4) {
            } else if (textValue.charCodeAt(i) == 0xD6) {
            } else if (textValue.charCodeAt(i) == 0xD1) {
            } else if (textValue.charCodeAt(i) == 0xDC) {
            } else if (textValue.charCodeAt(i) == 0xA7) {
            } else if (textValue.charCodeAt(i) == 0xBF) {
            } else if (textValue.charCodeAt(i) == 0xE4) {
            } else if (textValue.charCodeAt(i) == 0xF6) {
            } else if (textValue.charCodeAt(i) == 0xF1) {
            } else if (textValue.charCodeAt(i) == 0xFC) {
            } else if (textValue.charCodeAt(i) == 0xE0) {
            } else if (textValue.charCodeAt(i) == 0x391) {
            } else if (textValue.charCodeAt(i) == 0x392) {
            } else if (textValue.charCodeAt(i) == 0x395) {
            } else if (textValue.charCodeAt(i) == 0x396) {
            } else if (textValue.charCodeAt(i) == 0x397) {
            } else if (textValue.charCodeAt(i) == 0x399) {
            } else if (textValue.charCodeAt(i) == 0x39A) {
            } else if (textValue.charCodeAt(i) == 0x39C) {
            } else if (textValue.charCodeAt(i) == 0x39D) {
            } else if (textValue.charCodeAt(i) == 0x39F) {
            } else if (textValue.charCodeAt(i) == 0x3A1) {
            } else if (textValue.charCodeAt(i) == 0x3A4) {
            } else if (textValue.charCodeAt(i) == 0x3A5) {
            } else if (textValue.charCodeAt(i) == 0x3A7) {
            } else if (textValue.charAt(i) == '^') {
                extraChars++;
                document.write("Containts special characters. \n These are not allowed.\n Please remove them and try again.");
            } else if (textValue.charAt(i) == '{') {
                extraChars++;
            } else if (textValue.charAt(i) == '}') {
                extraChars++;
 
                document.write("Containts special characters. \n These are not allowed.\n Please remove them and try again.");
            } else if (textValue.charAt(i) == '\\') {
                extraChars++;
            } else if (textValue.charAt(i) == '[') {
                extraChars++;
            } else if (textValue.charAt(i) == '~') {
                extraChars++;
            } else if (textValue.charAt(i) == ']') {
                extraChars++;
            } else if (textValue.charAt(i) == '|') {
                extraChars++;
            } else if (textValue.charCodeAt(i) == 0x20AC) {
                extraChars++;
            } else {
                unicodeFlag = 1;
            }
        }
        if (unicodeFlag) {
            msgCount = textValue.length;
            if (msgCount <= 70) {
                msgCount = 1;
            } else {
                msgCount += (63 - 1);
                msgCount -= (msgCount % 63);
                msgCount /= 63;
            }
            document.getElementById("message:InfoCharCounter").innerHTML = ""
                    + textValue.length
                    + " unicode characters, " + msgCount + " SMS message(s)";
                                return true;
        } else {
            msgCount = textValue.length + extraChars;
            if (msgCount <= 159) {
                msgCount = 1;
            } else {
                msgCount += (152 - 1);
                msgCount -= (msgCount % 152);
                msgCount /= 152;
            }
            document.getElementById("message:InfoCharCounter").innerHTML = ""+ (textValue.length + extraChars)
                    + " characters, " + msgCount + " SMS message(s)";
                                return true;
        }
    }
 
    function clearTextBoxCounter() {
        document.getElementById("message:InfoCharCounter").innerHTML = "";
                return true;
    }

12/02/2014, 21h43
stoner2008

merci infiniment pour le coup de main ;)
13/02/2014, 11h26
OButterlin

Citation:

Envoyé par stoner2008

merci infiniment pour le coup de main ;)

Je t'en prie :)