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"

inputTextArea avec du Javascript

JSF Java

Vue hybride

Discussions similaires

Partager

Partager