Nombre de caractère de textarea

**minos23** · 19/05/2009, 12h15

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 :

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

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 :

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

**minos23** · 19/05/2009, 12h28

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

Code :

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

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>

**romaintaz** · 19/05/2009, 12h31

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

**romaintaz** · 19/05/2009, 12h35

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

Code :

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

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

**minos23** · 19/05/2009, 13h44

Envoyé par romaintaz

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

Code :

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

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

**minos23** · 21/05/2009, 03h37

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

Code :

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

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

Nombre de caractère de textarea

JSF Java

Vue hybride

Discussions similaires

Partager

Partager