[RESOLVIDO] Setar focus no h:inputText com enter

Olá pessoal!
Eu tenho um h:form com vários h:inputText, e com uns p:commandButton [primeFaces] dentro dele,
e tenho um código javaScript que seta o focus do h:inputText porém, quando eu pressiono a tecla enter, ele executa o primeiro p:commandButton
caso eu tire todos os p:commandButton de dentro do h:form, ele funciona… mas eu preciso desses p:commandButton nesse h:form.
Obs: já tentei trocar os p:commandButton por h:commandButton e acontece a mesma coisa!
Segue uma parte do código:

<h:form id="formDadosCliente" >
    <p:panel>
        <p:commandButton image="pesquisar" title="Buscar Clientes" onclick="dlgTabelaClientes.show()" update="formTabelaClientes" immediate="true" />
        <p:commandButton image="salvar"  title="Salvar" actionListener="#{clienteBean.gravar}" update="growl,formDadosCliente,formTabelaClientes"/>
        <p:commandButton image="desabilitar" title="Desabilitar" onclick="dlgDesabilitarCliente.show();" rendered="#{clienteBean.cliente.codigo > 0}" immediate="true" />
    </p:panel>

    <p:tabView id="tabViewCliente">
        <p:tab title="Dados Cliente"  id="tabDadosCliente">
            <h:panelGrid columns="5" columnClasses="coluna5,coluna40,coluna30,coluna10,coluna15" cellpadding="3" width="100%">
                <h:outputText value="Codigo" />
                <h:outputText value="Nome do cliente/Razão Social" />
                <h:outputText value="Fantasia/Apelido" />
                <h:outputText value="Pessoa" />
                <h:outputText value="CPF/CNPJ" />
                <h:inputText id="codigo" value="#{clienteBean.cliente.codigo}" disabled="true" style="width: 100%" />
                <h:inputText id="nome" value="#{clienteBean.cliente.nome}" style="width: 100%" required="true" requiredMessage="Informe o nome" onblur="upperCase(this)"  onkeydown="setaFoco(this, event);"/>
                <h:inputText id="fantasia" value="#{clienteBean.cliente.fantasia}" style="width: 100%"  onblur="upperCase(this)"  onkeydown="setaFoco(this, event);" />
                <h:selectOneMenu id="tipoPessoa" value="#{clienteBean.cliente.tipoPessoa}" valueChangeListener="#{clienteBean.trocaMascara}" style="width: 100%" onkeydown="setaFoco(this, event);" >
                    <f:selectItems value="#{listasUtil.tipoPessoa}" />
                    <f:ajax event="change" render="cpfCnpj" />
                </h:selectOneMenu>
                <p:outputPanel id="cpfCnpj" >
                    <p:inputMask value="#{clienteBean.cliente.cpfCnpj}" mask="#{clienteBean.mascaraCpfCnpj}" style="width: 100%" required="true" requiredMessage="Informe o CPF/CNPJ" onkeydown="setaFoco(this, event);" />
                </p:outputPanel>
            </h:panelGrid>
        </p:tab>
    </p:tabView>
</h:form>

Coloquei só a base do código, na realidade tem bem mais h:inputText dentro desse form, mas eu tirei para ficar mais claro.

Segue a função em JS, que eu encontrei na net:

function setaFoco(elemento, event)  {
    var ind = 0;
    var isNN = (navigator.appName.indexOf("Netscape")!=-1);
    var keyCode = (isNN) ? event.which : event.keyCode;
    var nKeyCode = event.keyCode;
    if(keyCode == 13){
        if (!isNN) {
            window.event.keyCode = 0;
        } // evitar o beep
        ind = getIndex(elemento);
        if (elemento.form[ind].type == 'textarea') {
            return;
        }
        ind++;
        elemento.form[ind].focus();
        if (elemento.form[ind].type == 'text') {
            elemento.form[ind].select();
        }
    }

    function getIndex(elemento) {
        var index = -1, i = 0, found = false;
        while (i < elemento.form.length && index == -1)
            if (elemento.form[i] == elemento) {
                index = i;
                if (i < (elemento.form.length -1)) {
                    if (elemento.form[i+1].type == 'hidden') {
                        index++;
                    }
                    if (elemento.form[i+1].type == 'button' && elemento.form[i+1].id == 'tabstopfalse') {
                        index++;
                    }
                }
            }
            else
                i++;
        return index;
    }
}

Ninguém!? :frowning:

Caramba! será que só eu tenho esse problema! :frowning:

É… não consegui fazer funcionar daquele jeito, então resolvi mudar o JS. Agora esse que eu coloquei, não é chamado a cada campo, mas sim verificado a cada ação de uma tecla.
Só que como não entendo muito de JS, e pesquisei muitooo e não encontrei nada, venho novamente pedir ajuda a vcs!
Tenho o seguinte código:

document.onkeypress = function(event){
    var key = event.keyCode;
    return key != 13;
}

document.captureEvents(Event.KEYPRESS);

O que eu queria é que quando eu pressionar o enter, ele transforme num TAB. por enquanto o que ele faz é bloquear o enter.
Já tentei fazer assim, mas não funcionou:

document.onkeypress = function(event){
    var key = event.keyCode;
    if(key == 13){
        Event.keyCode = 9;
        Event.which = 9;
        Event.charCode = 9;
        key = 9;
    }
    return true;
}

document.captureEvents(Event.KEYPRESS);

alguém pode me ajudar!?

Solução:

JavaScript:

function setaFoco(elemento)  {
    var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
    if (keyCode == 13) {
        var i;
        for (i = 0; i < elemento.form.elements.length; i++)
            if (elemento == elemento.form.elements[i])
                break;
        i = (i + 1) % elemento.form.elements.length;
        elemento.form.elements[i].focus();
        event.preventDefault();
        return false;
    }
    return false;
}

E no h:inputText:

1 curtida

Praticamente um tutorial :slight_smile:

Praticamente um tutorial :slight_smile:

Nossa! Nem lembrava mais disso rsrs
Se eu precisasse fazer isso novamente eu ia me acabar refazendo tudo do zero rsrs

*rrr
Eh q sempre dou uma comparada entre JSF e outros fremeworks, e futucando o GWT e Vaadin, acabei caindo aqui e
vi q poderia ser algo q serviria pra mim rs e achei interessante o qto te ajudaram rs.

[quote=andii.brunetta]Nossa! Nem lembrava mais disso rsrs
Se eu precisasse fazer isso novamente eu ia me acabar refazendo tudo do zero rsrs[/quote]

hoje tempos p:focus no prime.

Olá pessoal, tudo bem?

estou tendo erro de sintaxe com esse código:

function setaFoco(elemento)  {
    var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
    if (keyCode == 13) {
        var i;
        for (i = 0; i < elemento.form.elements.length; i++)
            if (elemento == elemento.form.elements[i])
                break;
        i = (i + 1) % elemento.form.elements.length;
        elemento.form.elements[i].focus();
        event.preventDefault();
        return false;
    }
    return false;
}

na seguinte linha: for (i = 0; i < elemento.form.elements.length; i++) por causa do sinal de “menor que” entre o “i” o “elemento.form.elements.length”… a descrição do erro é: Fatal Error: The content of elements must consist of well-formed character data or markup.

alguém pode me ajudar?

Paulo

Quando teclo ENTER o PrimeFaces automaticamente tentar enviar o formulário. ou seja não deixa passar para a próximo inputText.
Sabe como resolver isso?

               <h:form prependId="false">                   
                    <p:panel id="dadosConta">
                        <p:focus context="dadosConta"/>                
                        <p:messages showDetail="true" autoUpdate="true" closable="true"/>
                        <h:panelGrid columns="3" border="0">
                            <h:outputLabel value="Nome: " />
                            <p:inputText size="40" id="editnome" required="true" requiredMessage="Campo Usuário requerido."
                                         value="#{contaBean.conta.ctaNome}" onKeyDown="TABEnter();">
                                <p:watermark for="editnome" value="Nome *" />
                            </p:inputText>
                            <p:message for="editnome"></p:message>

                            <h:outputLabel value="Email: " />
                            <p:inputText size="40" id="editemail" required="true" requiredMessage="Campo E-mail requerido."
                                         value="#{contaBean.conta.ctaEmail}" maxlength="100" validatorMessage="E-mail inválido." onkeydown="setaFoco(this);">
                                <f:validateRegex
                                    pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />                        
                                <p:watermark for="editemail" value="E-mail *" />                        
                            </p:inputText>
                            <p:message for="editemail"></p:message>

                            <h:outputLabel value="Login: " />
                            <p:inputText size="15" id="editlogin" required="true" requiredMessage="Campo Login requerido."
                                         value="#{contaBean.conta.ctaLogin}" maxlength="20" onkeypress="soPermiteNumeros()">
                                <f:validateLength minimum="5"/>                                        
                                <p:watermark for="editlogin" value="Login *" />
                            </p:inputText>
                            

                            <p:message for="editlogin"></p:message>                    
                            <h:outputLabel value="Senha: " />
                            <p:password id="msgpassword" feedback="true" required="true" requiredMessage="Campo Senha requerido." 
                                        value="#{contaBean.conta.ctaSenha}" title="Senha" minLength="5" size="15"
                                        promptLabel="Insira sua senha" weakLabel="Fraca"  
                                        goodLabel="Média" strongLabel="Boa"/>                                        
                            <p:message for="msgpassword"></p:message>
                            <h:outputLabel value="Re-digite Senha:" style="color: blue;"/>
                            <p:password size="15" id="msgredigitepassword" required="true" 
                                        requiredMessage="Re-digite sua senha." minLength="5" 
                                        feedback="false" value="#{contaBean.repeteSenha}" />
                            <p:message for="msgredigitepassword"></p:message>
                            <p:commandButton actionListener="#{contaBean.salvar()}" value="Enviar" update="dadosConta" ajax="true">
                                <f:ajax execute="dadosConta" render="dadosConta" />  
                            </p:commandButton>

                        </h:panelGrid>

                    </p:panel>
                </h:form>

[quote=paulork]Olá pessoal, tudo bem?

estou tendo erro de sintaxe com esse código:

function setaFoco(elemento)  {
    var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
    if (keyCode == 13) {
        var i;
        for (i = 0; i < elemento.form.elements.length; i++)
            if (elemento == elemento.form.elements[i])
                break;
        i = (i + 1) % elemento.form.elements.length;
        elemento.form.elements[i].focus();
        event.preventDefault();
        return false;
    }
    return false;
}

na seguinte linha: for (i = 0; i < elemento.form.elements.length; i++) por causa do sinal de “menor que” entre o “i” o “elemento.form.elements.length”… a descrição do erro é: Fatal Error: The content of elements must consist of well-formed character data or markup.

alguém pode me ajudar?

Paulo[/quote]

Olá, conseguiu corrigir esse erro de sintaxe ? pra mim acontece a mesma coisa, valeu

Se estiver usando xhtml, para não dar erro de sintaxe

[code]
<h:head>
<script type=“text/javascript”>
//<![CDATA[
function setaFoco(elemento) {
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if (keyCode == 13) {
var i;
for (i = 0; i >< elemento.form.elements.length; i++)
if (elemento == elemento.form.elements[i])
break;
i = (i + 1) % elemento.form.elements.length;
elemento.form.elements[i].focus();
event.preventDefault();
return false;
}
return false;

            }

//]]>
</script> [/code]