inputTextArea avec du Javascript

**stoner2008** · 05/02/2014, 08h59

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 :

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

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

**OButterlin** · 05/02/2014, 09h13

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

Code :

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

1
2
3
4
5
6
7
8
...
<h:outputText id="txt1" value=""/>
...

<script>
document.getElementById("txt1").innerHTML = "Test";
</script>

**jeffray03** · 05/02/2014, 09h35

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

Code :

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

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

tu fais

Code :

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

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

et dans ta bean:

Code :

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

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

**OButterlin** · 05/02/2014, 10h08

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

**stoner2008** · 05/02/2014, 10h52

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 :

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

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

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

**OButterlin** · 05/02/2014, 14h27

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"

**jeffray03** · 05/02/2014, 15h32

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

code javascript:

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

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

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

**stoner2008** · 07/02/2014, 15h26

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 :

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

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

**OButterlin** · 10/02/2014, 09h14

là

Code :

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

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

ça devrait être

Code :

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

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

**stoner2008** · 11/02/2014, 10h58

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 :

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

   <p:ajax event="keyup" >

mais ça n'a rien donné
voici 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
 
<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 :

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

**OButterlin** · 11/02/2014, 14h15

Inspire toi de ceci (qui fonctionne)

Code :

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

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>

**stoner2008** · 12/02/2014, 11h21

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

**OButterlin** · 12/02/2014, 13h23

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

**stoner2008** · 12/02/2014, 14h08

voivi le code javascript:countmsg.js

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

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

**OButterlin** · 12/02/2014, 16h14

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 :

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

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

**stoner2008** · 12/02/2014, 20h43

merci infiniment pour le coup de main

**OButterlin** · 13/02/2014, 10h26

Envoyé par stoner2008

merci infiniment pour le coup de main

Je t'en prie

inputTextArea avec du Javascript

JSF Java

Discussions similaires

Partager

Partager