capturar o botão enter de um formulário para submeter por javascript

351 views
Skip to first unread message

Gustavo Lira e Silva

unread,
Aug 24, 2009, 6:23:37 PM8/24/09
to jav...@googlegroups.com
Pessoal tenho uma página de login  feito em JSF e possuo uma imagem que funciona como um botão.
Gostaria de ao pressionar o botão enter o formulário ser submetido, criei um javascript e funciona normal, mas em JSF não.
Como faço pelo amor de deus para ao submeter o formulário com enter?

segue meu código javascript abaixo:
<script type="text/javascript">
        //<![CDATA[  
            function submitenter(myfield,e)
            {
                var keycode;
                if (window.event) keycode = window.event.keyCode;
                else if (e) keycode = e.which;
                else return true;
              
                if (keycode == 13)
                {
                myfield.form.submit();
                return false;
                }
                else
                return true;
            }
            //]]>
    </script>

minha página JSF:
<h:form>
        <h:outputText value="Login" styleClass="campos" />
        <input type="text" value="#{credentials.username}" name="login"
            id="login" jsfc="h:inputText"
            onkeypress="return submitenter(this,event)" />
        <h:outputText value="Senha" styleClass="campos" />
        <input type="password" value="#{credentials.password}" name="senha"
            id="senha" jsfc="h:inputSecret"
            onkeypress="return submitenter(this,event)" />

   <h:commandLink action="#{identity.login}">
        <img alt="botão login" title="Entrar" class="bt_login"
            jsfc="h:graphicImage" value="/img/bt_login.png" />
    </h:commandLink> <img alt="cadeado ícone" class="icone_cadeado" jsfc="h:graphicImage"
        value="/img/cadeado_icone.png" />

</h:form>

Bruno Maomeh

unread,
Aug 25, 2009, 7:30:58 AM8/25/09
to jav...@googlegroups.com
já tentou colocar type="submit" no commandLink?

2009/8/24 Gustavo Lira e Silva <guga....@gmail.com>

Daniel Camargo

unread,
Aug 25, 2009, 8:32:04 AM8/25/09
to jav...@googlegroups.com
Seguinte,
Você pode realizar a submissão do formulário através de um clique em botão via javascript.

Se você tem um form como o seguinte:

<h:form id="meuForm">
...
<a4j:commandButton id="meuBotao" action="#{bean.acao}" value="hidden" style="display:none" styleClass="enterButton" />
</h:form>

teria que fazer:

document.getElementById("meuForm:meuBotao").click();

Se você usa jQuery tem um plugin que facilita a administração de hotkeys que é o jquery.hotkeys (eu uso a versão jquery.hotkeys-0.7.9.js)

Aí você pode fazer algo do estilo:

function handleEnter(){
         jQuery(document).bind('keydown', 'return', function(evt) {
                if (evt.target.tagName.toLowerCase() == "textarea") {//se for de uma textarea vc ignora o enter de deixa o comportamento normal.
                        return true;
                }
                // aqui voce pode fazer algo do tipo:
                if (jQuery(".enterButton").length){ // certifique-se de que vc tem apenas 1 botao com estilo enterButton no documento.
                        jQuery(".enterButton")[0].click();
                }
                return false;
        });
}
jQuery(document).ready(handleEnter);

2009/8/25 Bruno Maomeh <bruno...@gmail.com>

Gustavo Lira e Silva

unread,
Aug 25, 2009, 8:39:38 AM8/25/09
to jav...@googlegroups.com
não funcionou, mas obrigado pela dica

2009/8/25 Bruno Maomeh <bruno...@gmail.com>

Leonardo Couto Conrado

unread,
Aug 25, 2009, 9:08:57 AM8/25/09
to javasf: JavaServer Faces International Group
Gustavo,

Já tive este problema e na verdade ainda tenho, porém, este problema
era muito maior, consegui contorna utlizando a propriedade
type="submit" no a4j:commandButton desta forma funciona perfeitamente
no Firefox já no IEca não vai de nenhuma maneira, a verdade é que a
Microsoft foge muito dos padrões estabelecidos pela W3C e por isso
temos tantos problemas no desenvolvimento de UI para web... Mas é isso
aconselho a vc orientar os usuários utlizar o firefox ele terá uma
maior interatividade sem falar numa melhor perfomance.

att,

Leonardo Couto Conrado.

On 25 ago, 09:39, Gustavo Lira e Silva <guga.li...@gmail.com> wrote:
> não funcionou, mas obrigado pela dica
>
> 2009/8/25 Bruno Maomeh <brunomao...@gmail.com>
>
> > já tentou colocar type="submit" no commandLink?
>
> > 2009/8/24 Gustavo Lira e Silva <guga.li...@gmail.com>

Rafael Pestano

unread,
Aug 25, 2009, 9:15:57 AM8/25/09
to jav...@googlegroups.com
tenta ao invez de dar myfield.form.submit(); pegar o id do botão e dar um .click.
 
Att,

--

Rafael Mauricio Pestano

Graduando em Ciência da Computação
UFRGS



De: Bruno Maomeh <bruno...@gmail.com>
Para: jav...@googlegroups.com
Enviadas: Terça-feira, 25 de Agosto de 2009 8:30:58
Assunto: [javasf] Re: capturar o botão enter de um formulário para submeter por javascript


Veja quais são os assuntos do momento no Yahoo! + Buscados: Top 10 - Celebridades - Música - Esportes

Gustavo Lira e Silva

unread,
Aug 25, 2009, 9:51:21 AM8/25/09
to jav...@googlegroups.com
Fiz de todas as formas postadas e todas funcionaram. só que nenhuma delas mostra a mensagem de login inválido na página, a página apenas da um refresh e não mostra o meu <h:messages>.
Não posso deixar de exibir a mensagem de login inválido.

Gostava tanto do JSF agora que eu vejo como ele é ruim pra trabalhar com Javascript e tb com webdesigner, mesmo utilizando facelets....  =(
Estou meio desapontado com ele, e olha que utilizo jboss seam, rsrs

Daniel Camargo

unread,
Aug 25, 2009, 1:27:56 PM8/25/09
to jav...@googlegroups.com
Eu utilizo recursos como estes amplamente nos sistemas que utilizam JSF e até agora não tive problema algum.

Provavelmente seja algum conceito mal compreendido ou mal interpretado. Esse exemplo que te passei está sendo usado em produção pra clientes que utilizam firefox e IE6+.

Neste sistema todo formulário tem um mainButton que é disparado pela tecla enter e outros botões que utilizam hotkeys como F12, F8, F9 e etc.

Aconselho a usar o jQuery porque ele já te ajuda a tratar de problemas de compatibilidade entre os browsers. Só não esquece de configurar ele como nonConflict pra usar com o richfaces porque senão vai dar merda.

Desanima não que esse tipo de coisa funciona bem!

Sucesso aí!



2009/8/25 Gustavo Lira e Silva <guga....@gmail.com>
Reply all
Reply to author
Forward
0 new messages