Richfaces : Mettre le cursor dans un inputtext

Version imprimable

10/02/2010, 22h49
matiew

Richfaces : Mettre le cursor dans un inputtext

Bonjour à tous,

J'ai une zone de saisie comme ceci :

Code:

<h:inputText value="#{personBacking.searchText}" id="searchText"/>

J'aimerai que par défaut le curseur de la souris soit dans cette zone afin de pouvoir y saisir quelque chose directement sans cliquer à l'intérieur.

En fait je veut utiliser un évènement "onKeyup" afin de regénérer un "outPutText" au fur et à mesure de la saisie. Cependant, après chaque lettre saisie, le curseur n'est plus dans ma zone de texte. Il faut donc recliquer à chaque fois dedans après avoir saisie un caraactère; d'où ma demande !

J'espère avoir été clair.

Merci d'avance
11/02/2010, 13h00
romaintaz

C'est bizarre que tu perdes le focus quand tu tapes le texte. A moins que tu ne fasses la mise à jour de l'outputText en Ajax ? Tu peux nous montrer le code JSF ?

Sinon, tu peux utiliser la fonction Javascript field.focus() pour donner le focus à ton champ field...

Merci pour ta réponse.

Voila le code jsf de la page :

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
<ui:composition
 xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:rich="http://richfaces.org/rich"
 xmlns:a4j="http://richfaces.org/a4j"
 xmlns:dg="http://galland/jsf">
  <rich:panel>
    <f:facet name="header">
      <h:outputText value="Recherche de personnes" />
    </f:facet>
 
    <h:selectOneMenu value="#{personBacking.selectedSearchAttribute}">
  		<dg:selectItems value="#{personBacking.searchAttributes}" var="attribute" label="#{messages[attribute]}"  />
	</h:selectOneMenu>
 
	<h:selectOneMenu value="#{personBacking.searchOperator}">
  		<dg:convertEnum />
  		<dg:enumItem enumValue="STARTS" label="#{messages['STARTS']}" />
  		<dg:enumItem enumValue="CONTAINS" label="#{messages['CONTAINS']}" />
  		<dg:enumItem enumValue="ENDS" label="#{messages['ENDS']}" />
	</h:selectOneMenu>
 
 
	<h:inputText value="#{personBacking.searchText}" id="searchText">
		<a4j:support event="onkeyup" reRender="output"/>
	</h:inputText>	
 
 
	<a4j:commandButton id="save"
	 action="#{personBacking.search()}"
     value="Rechercher" />
 
    <h:outputText id="output" style="font-weight:bold" value="#{personBacking.searchText}"/>
 
   </rich:panel>
 
    <rich:dataTable
    rendered="#{not empty personBacking.searchList}"
    value="#{personBacking.searchList}"
    var="searchPerson"
    headerClass="table-header"
            style="width: 100%"
  	>
	    <f:facet name="header">
	      	<h:outputText value="Personnes" />
	    </f:facet>
	    <h:column>
	    	<h:outputText value="#{searchPerson.uid}" />
	    </h:column>
	    <h:column>
	    	<h:outputText value="#{searchPerson.cn}" />
	    </h:column>
  	</rich:dataTable>
 
 
 
</ui:composition>

Et voila le bout de code intéressant :

Code:

1
2
3
4
5
<h:inputText value="#{personBacking.searchText}" id="searchText">
		<a4j:support event="onkeyup" reRender="output"/>
	</h:inputText>
 
<h:outputText id="output" style="font-weight:bold" value="#{personBacking.searchText}"/>

Merci !

Bon, effectivement, ça confirme ce que je disais, à savoir que la mise à jour de l'outputText se fait en Ajax.

Donc 2 possibilités :

1. Laisser tel quel et utiliser le focus() sur le oncomplete :
Code:

1 2 3 4 5 <h:inputText value="#{personBacking.searchText}" id="searchText"> <a4j:support event="onkeyup" reRender="output" oncomplete="$('myForm:output').focus();"/> </h:inputText> <h:outputText id="output" style="font-weight:bold" value="#{personBacking.searchText}"/>
2. Etant donné que les deux éléments pointent vers la même propriété, autant faire la mise à jour en Javascript directement, sans Ajax :
Code:

1 2 3 <h:inputText value="#{personBacking.searchText}" id="searchText" onkeyup="$('myForm:output').value = this.value;"/> <h:outputText id="output" style="font-weight:bold" value="#{personBacking.searchText}"/>
Tu noteras dans les deux cas que je récupère l'élément outputText de cette façon : $('myForm:output'). Le $('...') est l'équivalent de document.getElementById('...') en Javascript. De plus, pour récupérer l'élément, je dois préfixé l'ID du composant par l'ID du formulaire qui le contient (il faut remplacer myForm par l'ID de ton formulaire).