Fórum JQuery - Enter com função do Tab #513669
14/03/2015
0
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
Curtir tópico
+ 0Post mais votado
15/03/2015
Ainda não consegui, estou tentando e pesquisado
Caso vc consiga resolver, poste a solução
Abraços
Leandro
Leandro Carvalho
Gostei + 1
Mais Posts
15/03/2015
Carlos Matuda
abraços
Gostei + 0
16/03/2015
Carlos Matuda
<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
18/03/2015
Leandro Carvalho
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
18/03/2015
Leandro Carvalho
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
Clique aqui para fazer login e interagir na Comunidade :)