Passar foco dos campos com a tecla enter - JSF + primefaces

Elvis_Fabiane1 · Fevereiro 14, 2013, 3:06pm

Boa tarde galera, tenho um form por exemplo:

<p:tab title="Cadastro/Alteração" id="tabForm" rendered="#{sec:ifNotGranted('USR')}">
                            <p:growl id="grow2" life="4000"/>
                            <p:focus for="aceTitulo"/>
                            <fieldset>
                                <legend>Dados Principais</legend>
                                <h:panelGrid columns="2" width="100%">
                                    <h:panelGrid columns="2">

                                        <h:outputLabel id="aceCodigo_lbl" value="Código:" for="aceCodigo" />
                                        <h:outputText id="aceCodigo" value="#{acervoJsfBean.crudObj.aceCodigo}" />

                                        <p:outputLabel id="aceTitulo_lbl" value="Titulo da Obra:" for="aceTitulo" />
                                        <p:inputText id="aceTitulo" value="#{acervoJsfBean.crudObj.aceTitulo}" 
                                                     required="true" requiredMessage="O campo título da obra deve ser informado." 
                                                     style="width: 150%" maxlength="200"/>

                                        <p:outputLabel id="aceSubtitulo_lbl" value="Subtítulo:" for="aceSubtitulo" />
                                        <p:inputText id="aceSubtitulo" value="#{acervoJsfBean.crudObj.aceSubtitulo}" 
                                                     required="true" style="width: 150%" maxlength="100"/>

                                        <p:outputLabel id="aceeditora_lbl" value="Editora" for="aceeditora" />
                                        <p:selectOneMenu id="aceeditora" value="#{acervoJsfBean.crudObj.aceeditora}" 
                                                         converter="sec" required="true" 
                                                         requiredMessage="O campo editora deve ser informado.">
                                            <f:selectItem itemLabel="Selecione" itemValue="#{null}"/>
                                            <f:selectItems value="#{acervoJsfBean.editorasList}" var="e" 
                                                           itemLabel="#{e.ediDescricao}" itemValue="#{e}"/>
                                        </p:selectOneMenu>

                                        <p:outputLabel id="aceIsbn_lbl" value="ISBN:" for="aceIsbn" />
                                        <p:inputText id="aceIsbn" value="#{acervoJsfBean.crudObj.aceIsbn}" 
                                                     style="width: 150%" maxlength="20"/>

                                        <p:outputLabel id="aceDatacad_lbl" value="Data:" for="aceDatacad" />
                                        <p:inputMask id="aceDatacad" mask="99/99/9999" value="#{acervoJsfBean.crudObj.aceDatacad}" 
                                                     style="width: 60%">
                                            <f:convertDateTime locale="pt,BR" dateStyle="long" pattern="dd/MM/yyyy" />  
                                        </p:inputMask>

                                        <p:outputLabel id="acetipomate_lbl" value="Tipo do Material" for="acetipomate" />
                                        <p:selectOneMenu id="acetipomate" value="#{acervoJsfBean.crudObj.acetipomate}" 
                                                         converter="sec" required="true" requiredMessage="O campo tipo do material deve ser informado.">
                                            <f:selectItem itemLabel="Selecione" itemValue="#{null}"/>
                                            <f:selectItems value="#{acervoJsfBean.tipoMaterialList}" var="m" itemLabel="#{m.tipoDescricao}" itemValue="#{m}"/>
                                        </p:selectOneMenu>

                                    </h:panelGrid>
                                    <h:panelGrid columns="2" style="height: 100%; border-top: 0">

                                        <p:outputLabel id="aceidioma_lbl" value="Idioma" for="aceidioma" />
                                        <p:selectOneMenu id="aceidioma" value="#{acervoJsfBean.crudObj.aceidioma}" converter="sec"  
                                                         required="true" requiredMessage="O campo classicacão deve ser informado.">
                                            <f:selectItem itemLabel="Português" itemValue="#{i}"/>
                                            <f:selectItems value="#{acervoJsfBean.idiomaList}" var="i" itemLabel="#{i.idiDescricao}"   itemValue="#{i}"/>
                                        </p:selectOneMenu>
                                        <p:outputLabel id="aceLocalizacao_lbl" value="Localização:" for="aceLocalizacao" />
                                        <p:inputText id="aceLocalizacao" value="#{acervoJsfBean.crudObj.aceLocalizacao}" style="width: 40%" maxlength="10"/>

                                        <p:outputLabel id="aceCutter_lbl" value="Cutter:" for="aceCutter" />
                                        <p:inputText id="aceCutter" value="#{acervoJsfBean.crudObj.aceCutter}" style="width: 75%" maxlength="10"/>

                                        <h:outputLabel id="aceCdd_lbl" value="CDD:" for="aceCdd" />
                                        <p:inputText id="aceCdd" value="#{acervoJsfBean.crudObj.aceCdd}" style="width: 75%" maxlength="10"/>

                                        <h:outputLabel  value="Exemplares: " />
                                        <p:inputMask value="#{acervoJsfBean.quantExemplar}" mask="9?999" placeHolder="" style="width: 20%"/>

                                        <h:outputText value="Classificação:" />
                                        <p:commandButton id="classBtn" value="..." onclick="classDlg.show()" 
                                                         visivel="#{sec:ifAnyGranted('ADM')}" image="search"/>
                                        <h:outputText value="#{acervoJsfBean.crudObj.aceclass.clasDescricao}" />
//continua

gostaria que minha tecla enter fosse a responsável por passar o foco, por exemplo, digito um campo, clico em enter e vou pro proximo, digito novamente clico em enter e o foco muda denovo, quando digitar todos os campos gostaria que o foco saísse do ultimo campo e fosse pro primeiro novamente formando vamos dizer assim um clico de foco que nunca termina, quando quero salvar clico em enter e pronto.

Gostaria muito que alguem me ajudasse, ja li muito e vi varios exemplos com javascript mas nao utilizar ;s

Agradeço qualquer ajuda, até mais !

Elvis_Fabiane1 · Fevereiro 14, 2013, 4:11pm

alguem ?

Rodrigo_Sasaki · Fevereiro 14, 2013, 4:13pm

Você pode fazer algo com JQuery. Mais ou menos assim:$('input:not([type="button"]),select,textarea').live('keydown', function(e) { var nodeName = e.target.nodeName.toLowerCase(); if (e.which === 13) { if (nodeName === 'input' && e.target.type != 'button' && e.target.type != 'submit' || nodeName === 'select' || nodeName === 'textarea') { var focusable = $('input,a,select,button,textarea').filter(':visible'); focusable.eq(focusable.index(this)+1).focus(); return false; } } });

Elvis_Fabiane1 · Fevereiro 14, 2013, 5:43pm

se nao for pedir demais, nunca mexi nisso ainda, aonde eu coloco isso e como eu chamo ? vlw

Rodrigo_Sasaki · Fevereiro 14, 2013, 6:15pm

Você coloca no script da sua página, e não precisa chamar o método em lugar nenhum

Elvis_Fabiane1 · Fevereiro 14, 2013, 6:38pm

simplesmente larga na página XHTML?
desculpa, é basico mesmo mas vou aprender como faz;;

assim ?

// continua

           <p:defaultCommand target="treapSalvar" />
                                <treap:btnCrudSalvar id="treapSalvar" bean="#{tipoMaterialJsfBean}"/>
                                <treap:btnCrudCancelar bean="#{tipoMaterialJsfBean}"/>
                            </h:panelGrid>
                        </p:tab>

                        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript">
                            
                            $('input:not([type="button"]),select,textarea').live('keydown', function(e) {  
                                var nodeName = e.target.nodeName.toLowerCase();  
                                if (e.which === 13) {  
                                    if (nodeName === 'input' && e.target.type != 'button' && e.target.type != 'submit' ||  
                                        nodeName === 'select' || nodeName === 'textarea') {  
                                        var focusable = $('input,a,select,button,textarea').filter(':visible');  
                                        focusable.eq(focusable.index(this)+1).focus();  
                                        return false;  
                                    }  
                                }  
                            });  
                            
                        </script>


                        <p:tab title="Procurar" id="tabList">

                            <p:panel id="parametros">
                                <treap:msgdica msg="Inf

// continua

Rodrigo_Sasaki · Fevereiro 14, 2013, 6:40pm

Pode colocar em uma tag dentro do

Elvis_Fabiane1 · Fevereiro 14, 2013, 6:58pm

acontece esse erro

GRAVE: Error Parsing /teste.xhtml: Error Traced[line: 18] The entity name must immediately follow the '&' in the entity reference.

tentei assim

<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html 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:treap="http://java.sun.com/jsf/composite/treap"
      xmlns:p="http://primefaces.org/ui">        
    <head>
        <script>
            $('input:not([type="button"]),select,textarea').live('keydown', function(e) {    
                var nodeName = e.target.nodeName.toLowerCase();    
                if (e.which === 13) {    
                    if (nodeName === 'input' && e.target.type != 'button' && e.target.type != 'submit' ||    
                        nodeName === 'select' || nodeName === 'textarea') {    
                        var focusable = $('input,a,select,button,textarea').filter(':visible');    
                        focusable.eq(focusable.index(this)+1).focus();    
                        return false;    
                    }    
                }    
            });    
        </script>
        <body>
            <ui:composition template="./default_layout_with_menu.xhtml">
                <form id="form">
                    <ui:define name="titulo-pagina">
                        Tipo do Material
                    </ui:define>
                    <ui:define name="content">  
                        <treap:ajaxStatus/>
                        <p:tabView id="tab" activeIndex="#{tipoMaterialJsfBean.indiceAbaSelecionada}" widgetVar="tab1">
                            <p:tab title="Cadastro/Alteração" id="tabForm" rendered="#{sec:ifNotGranted('USR')}">
                                <p:growl id="grow2" life="4000"/>
                                <p:focus for="tipoDescricao"/>
                                <fieldset><legend>Dados principais</legend>
                                    <h:panelGrid columns="2">

                                        <h:outputLabel id="tipoCodigo_lbl" value="Código:" for="tipoCodigo" />
                                        <h:outputText id="tipoCodigo" value="#{tipoMaterialJsfBean.crudObj.tipoCodigo}" />

                                        <p:outputLabel id="tipoDescricao_lbl" value="Descrição:" for="tipoDescricao" />
                                        <p:inputText id="tipoDescricao" value="#{tipoMaterialJsfBean.crudObj.tipoDescricao}" required="true"
                                                     requiredMessage="O campo descrição deve ser informado." style="width: 170%" maxlength="50"/>
                                        <h:outputLabel/>

                                    </h:panelGrid>
                                </fieldset><br/>
                                <h:panelGrid columns="3"> 
                                    <p:defaultCommand target="treapSalvar" />
                                    <treap:btnCrudSalvar id="treapSalvar" bean="#{tipoMaterialJsfBean}"/>
                                    <treap:btnCrudCancelar bean="#{tipoMaterialJsfBean}"/>
                                </h:panelGrid>
                            </p:tab>
                        </p:tabView>
                    </ui:define> 
                </form>
            </ui:composition>
        </body>
    </head>
</html>

Elvis_Fabiane1 · Fevereiro 21, 2013, 5:20pm

amigo ainda estou tentando fazer o enter passar o foco dos campos, esta dando o erro no script

<!DOCTYPE html>
<html 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:treap="http://java.sun.com/jsf/composite/treap"
      xmlns:p="http://primefaces.org/ui" 
      xmlns:cc="http://java.sun.com/jsf/composite">
    <head>
        <script language="JavaScript">
            $('input:not([type="button"]),select,textarea').live('keydown', function(e) {  
                var nodeName = e.target.nodeName.toLowerCase();  
                if (e.which === 13) {  
                  if (nodeName === 'input' && e.target.type != 'button' && e.target.type != 'submit' ||  
                        nodeName === 'select' || nodeName === 'textarea') {  
                        var focusable = $('input,a,select,button,textarea').filter(':visible');  
                        focusable.eq(focusable.index(this)+1).focus();  
                        return false;  
                    }  
                }  
            });  
        </script>
    </head>
    <body>
        <h:form id="form">
            <ui:composition template="./default_layout_with_menu.xhtml">
                <ui:define name="titulo-pagina">
                    Acervo
                </ui:define>
                <ui:define name="content">

o erro da aqui, bem no &&

system · Dezembro 30, 2015, 1:44pm

Passar foco dos campos com a tecla enter - JSF + primefaces

Cursos de Mobile

Cursos de Programação

Cursos de Front-end

Cursos de DevOps

Cursos de Design & UX

Cursos de Business

Cursos de Data & BI