JQuery - Enter com função do Tab

Java

14/03/2015

Boa noite!

Tenho dentro de um formulário uma dataTable que gostaria de navegar nos campos pelo "enter" o problema que quando passa pelo input "pules" no meu managerBean tem um método que adicionar essa linha na tabela e inseri uma nova linha em branco para eu começar a digitar o próximo, gostaria de quando executar esse listener do "pules" o foco voltasse para o código para eu inserir novamente, hoje esta executando o submit do formulário

alguém poderia me ajudar com isso ?

<p:dataTable value="#{novoLancamentoBean.lancamento.itens}" var="item" rowIndexVar="linha" id="tabelaCambistas">


<p:column headerText="Código" style="text-align: center; width: 100px">
<h:outputText value="#{item.cambista.codigo}" rendered="#{item.cambistaAssociado}" />

<p:inputText id="codigo" styleClass="pula" size="8" value="#{novoLancamentoBean.codigo}" label="Código"
rendered="#{not item.cambistaAssociado}" >
<p:ajax event="change" process="@this" update="tabelaCambistas:nomeCambista"
listener="#{novoLancamentoBean.carregarCambistaPorCodigo}" />
</p:inputText>
</p:column>

<p:column headerText="Cambista">
<h:outputText id="nomeCambista" value="#{novoLancamentoBean.cambistaLinhaEditavel.nome}" rendered="#{not item.cambistaAssociado}" />
<h:outputText value="#{item.cambista.nome}" rendered="#{item.cambistaAssociado}" />
</p:column>

<p:column headerText="Valor bruto" style="text-align: right; width: 120px" >
<h:outputText value="#{item.valorBruto}" rendered="#{item.cambistaAssociado}" >
<f:convertNumber pattern="#,##0.00" minFractionDigits="2" />
</h:outputText>

<p:inputText size="10" value="#{item.valorBruto}" for="valorBruto" styleClass="moeda pula" style="text-align: right" rendered="#{not item.cambistaAssociado}">
<f:convertNumber pattern="#,##0.00" minFractionDigits="2" />
<p:ajax event="change" process="@this" />
</p:inputText>
</p:column>

<p:column headerText="Valor movimento" style="text-align: right; width: 120px" >
<h:outputText value="#{item.valorMovimento}" rendered="#{item.cambistaAssociado}" >
<f:convertNumber pattern="#,##0.00" minFractionDigits="2" />
</h:outputText>

<p:inputText size="10" value="#{item.valorMovimento}" styleClass="moeda pula" style="text-align: right" rendered="#{not item.cambistaAssociado}">
<f:convertNumber pattern="#,##0.00" minFractionDigits="2" />
<p:ajax event="change" process="@this"
listener="#{novoLancamentoBean.calcular(item)}"/>
</p:inputText>
</p:column>

<p:column headerText="Pules" style="text-align: center; width: 100px">
<p:inputText size="8" value="#{item.pules}" label="Pules" styleClass="pula" style="text-align: right" >
<p:ajax event="blur" process="@this"
listener="#{novoLancamentoBean.atualizarPules(item, linha)}"
update="tabelaCambistas :frmLancamento:totalPules :frmLancamento:totalBruto :frmLancamento:totalLiquido :frmLancamento:totalMovimento" />
</p:inputText>
</p:column>

<p:column headerText="Valor liquido" style="text-align: right; width: 120px">
<h:outputText size="10" value="#{item.valorLiquido}" style="text-align: right" >
<f:convertNumber pattern="#,##0.00" minFractionDigits="2" />
</h:outputText>
</p:column>

<p:column headerText="Comissão" style="text-align: right; width: 120px">
<h:outputText size="10" value="#{item.comissao}" style="text-align: right" >
<f:convertNumber pattern="#,##0.00" minFractionDigits="2" />
</h:outputText>
</p:column>

<p:column headerText="Saldo do dia" style="text-align: right; width: 120px">
<h:outputText size="10" value="#{item.saldoDia}" >
<f:convertNumber pattern="#,##0.00" minFractionDigits="2" />
</h:outputText>
</p:column>

<p:column headerText="Saldo acumulado" style="text-align: right; width: 120px">
<h:outputText size="10" value="#{item.cambista.saldoAcumulado}" style="text-align: right" >
<f:convertNumber pattern="#,##0.00" minFractionDigits="2" />
</h:outputText>
</p:column>

</p:dataTable>

Segue o script para fazer o Enter com função do Tab

<script type="text/javascript">
$(document).ready(function(){
/* ao pressionar uma tecla em um campo que seja de class="pula" */
$('.pula').keypress(function(e){
/*
* verifica se o evento é Keycode (para IE e outros browsers)
* se não for pega o evento Which (Firefox)
*/
var tecla = (e.keyCode?e.keyCode:e.which);

/* verifica se a tecla pressionada foi o ENTER */
if(tecla == 13){
/* guarda o seletor do campo que foi pressionado Enter */
campo = $('.pula');
/* pega o indice do elemento*/
indice = campo.index(this);
/*soma mais um ao indice e verifica se não é null
*se não for é porque existe outro elemento
*/
if(campo[indice+1] != null){
/* adiciona mais 1 no valor do indice */
proximo = campo[indice + 1];
/* passa o foco para o proximo elemento */
proximo.focus();
/* impede o sumbit caso esteja dentro de um form */
e.preventDefault(e);
return false;
}
}
})
})
</script>
Leandro Carvalho

Leandro Carvalho

Curtidas 0

Melhor post

Leandro Carvalho

Leandro Carvalho

15/03/2015

Boa noite!
Ainda não consegui, estou tentando e pesquisado
Caso vc consiga resolver, poste a solução

Abraços
Leandro
GOSTEI 1

Mais Respostas

Carlos Matuda

Carlos Matuda

14/03/2015

Boa noite Leandro estou com o mesmo problema conseguiu alguma solução ?


abraços
GOSTEI 0
Carlos Matuda

Carlos Matuda

14/03/2015

Boa noite Leandro fiz assim e alterou o focus

<p:ajax event="blur" oncomplete="$(function(){PrimeFaces.focus('frm:tabView:tabela:0:valor');});" />

frm --- id do formulario
tabview -- id do tabview
tabela -- id da tabela
0 -- representa a primeira linha da tabela
valor - id do campo onde eu quero o focus

usei o tabindex para os componetes de entrada de dados

Leando não sei se é a melhor solução foi o que consegui, sei vc ou outra pessoa tiver alguma solução melhor agradeço.

abraços
GOSTEI 0
Leandro Carvalho

Leandro Carvalho

14/03/2015

Carlos, bom dia!

Ainda não consegui, quando teclo o ENTER no <p:inputText pules, ele não esta fazendo a função do TAB, creio que porque no script só pula para o próximo campo no caso de não ser o último, se eu pular pelo TAB ai o foco funciona, sabe como resolvo essa questão ?

Outra dúvida, estava pesquisando ontem na internet e encontrei no fórum uma solução que vários colegas adotaram e resolveram para eles, mas tentei implementar e não tive sucesso, eles dizem que simplesmente colocando uma esse linha no form já trocaria o ENTER por TAB

<h:form id="frmLancamento" onkeydown="if(event.keyCode==13) event.keyCode=9;" >

Abraços
Leandro
GOSTEI 0
Leandro Carvalho

Leandro Carvalho

14/03/2015

Carlos, bom dia!

Ainda não consegui, quando teclo o ENTER no <p:inputText pules, ele não esta fazendo a função do TAB, creio que porque no script só pula para o próximo campo no caso de não ser o último, se eu pular pelo TAB ai o foco funciona, sabe como resolvo essa questão ?

Outra dúvida, estava pesquisando ontem na internet e encontrei no fórum uma solução que vários colegas adotaram e resolveram para eles, mas tentei implementar e não tive sucesso, eles dizem que simplesmente colocando uma esse linha no form já trocaria o ENTER por TAB

<h:form id="frmLancamento" onkeydown="if(event.keyCode==13) event.keyCode=9;" >

Abraços
Leandro
GOSTEI 0
POSTAR