Nombre de caractère de textarea

Version imprimable

J'utilise JSF et j'ai un inputTextarea, je veux afficher le nombre de caractère de ce dernier dans un inputText au fur et au mesure que l'utilisateur écrit. Qu'on j'utilise une simple page JSP cette fonction javaScript

Code:

1
2
3
4
5
6
7
 <script type='text/javascript'>
onch("");	
function onch(txt) {
document.MyForm.nbCaractere.value=txt.length.toString();
timer=setTimeout("onch(document.MyForm.textarea.value)", 100); 	
}
</script>

fait le travail demandé mais avec JSF non.
voilà mon code dans 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
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>  
<%@taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<html>
 
 <f:view >
<h:form id="MyForm" style="background-color: CornflowerBlue;width: 1255; height: 480px">
<h:panelGrid border="1" columns="1" style="width: 1255px;height: 150px">
<h:panelGrid border="0" columns="1" style="width: 220px; height: 15px">
			<h4><h:outputText value="Message" style="width: 120px; height: 10px"></h:outputText></h4>
 
		</h:panelGrid>
		<h:panelGrid border="0" columns="2" style="width: 467px; height: 90px">
			<h:inputTextarea id="textarea" value="#{envoi.message}" style="width: 401px; height: 90px"></h:inputTextarea>
 
		</h:panelGrid>
		<h:panelGrid border="0" columns="4" style="width: 250px">
			<h4><h:outputText value="Nombre de caractère" style="width: 160px; height: 20px"></h:outputText></h4>
			<h:inputText id="nbCaractere" style="width: 47px; height: 30px"></h:inputText>
 
		</h:panelGrid>
</h:panelGrid>
 
	</h:form>
 
   </f:view>
 <script type='text/javascript'>
onch("");	
function onch(txt) {
document.MyForm.nbCaractere.value=txt.length.toString();
timer=setTimeout("onch(document.MyForm.textarea.value)", 100); 	
}
</script>
</html>

Merci d'avance

Ok merci j'ai résolu le problème, la fonction javaScript devient

Code:

1
2
3
4
5
6
7
<script type='text/javascript'>
onch("");	
function onch(txt) {
document.getElementById("MyForm:nbCaractere").value=txt.length.toString();
timer=setTimeout("onch(document.getElementById(\"MyForm:textarea\").value)", 100); 	
}
</script>

;)

19/05/2009, 12h31
romaintaz

Ton problème était effectivement dû au fait qu'en JSF les ID des inputs sont préfixés par l'ID du formulaire qui les contient...

Ne pourrais tu pas simplifier ton code en faisant comme ça plutôt :
Code:

1 2 3 4 <h:form id="myForm"> <h:inputText id="nbCaracteres" .../> <h:inputTextarea ... onkeyup="document.getElementById('myForm:nbCaracteres').value = this.value.length"/> ...

Citation:
Envoyé par romaintaz
Ne pourrais tu pas simplifier ton code en faisant comme ça plutôt :
Code:

1 2 3 4 <h:form id="myForm"> <h:inputText id="nbCaracteres" .../> <h:inputTextarea ... onkeyup="document.getElementById('myForm:nbCaracteres').value = this.value.length"/> ...
Merci beaucoup ça marche aussi

J'ai rencontré un problème lorsque j'utilise un managed bean

Code:

1
2
3
4
5
6
7
8
<h:panelGrid border="0" columns="2" style="width: 467px; height: 90px">
			<h:inputTextarea id="textarea" value="#{envoi.message}" style="width: 401px; height: 90px" onkeyup="document.getElementById('MyForm:nbCaractere').value = this.value.length"></h:inputTextarea>
 
		</h:panelGrid>
		<h:panelGrid border="0" columns="4" style="width: 250px">
			<h4><h:outputText value="Nombre de caractère" style="width: 160px; height: 20px"></h:outputText></h4>
			<h:inputText id="nbCaractere" value="#{envoi.nbCaractere}" style="width: 47px; height: 30px"></h:inputText>
		</h:panelGrid>

Le problème est que dans mon managed bean "envoi", "nbCaractere" reste toujours égal à zéro meme si j'écris dans le textarea? comment je peux résoudre ça? Merci