[RESOLVIDO] Setar focus no h:inputText com enter

3 de dezembro de 2010 13 respostas

andii.brunetta 3 de dezembro de 2010

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:

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

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

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 &lt; elemento.form.length && index == -1)
            if (elemento.form[i] == elemento) {
                index = i;
                if (i &lt; (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;
    }
}

13 Respostas

andii.brunetta 4 de dez. de 2010

Ninguém!?

andii.brunetta 6 de dez. de 2010

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

andii.brunetta 8 de dez. de 2010

É… 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!?

andii.brunetta 9 de dez. de 2010 1 like

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 &lt; 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:

UpTheIrons 27 de mar. de 2012

Praticamente um tutorial

UpTheIrons 27 de mar. de 2012

Praticamente um tutorial

andii.brunetta 27 de mar. de 2012

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

UpTheIrons 28 de mar. de 2012

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

sfidencio 12 de mai. de 2012

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

hoje tempos p:focus no prime.

paulork 27 de ago. de 2012

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

warquia 14 de dez. de 2012

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>

Elvis_Fabiane1 21 de fev. de 2013

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

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

fabiolucianogoes 22 de ago. de 2014

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

&lt;h:head&gt;
            &lt;script type="text/javascript"&gt;
//&lt;![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 &gt;&lt; 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;

                }
//]]&gt;                
&lt;/script&gt;

Criado 3 de dezembro de 2010

Ultima resposta 22 de ago. de 2014

Respostas 13

Participantes 7

13 Respostas

Topicos relacionados