Uso de TAB para navegar nos campos de um formulário Olá. Preciso de uma ajuda em um problema que estou tendo. Tenho uma tela onde preciso passar de um campo para outro mediante uso da tecla TAB (ou alternativamente as setas para esquerda e para direita do teclado). Isto é pedido de um cliente para agilizar digitação de trabalhos repetitivos em uma tela de coleta de dados medidos em laboratório interno do cliente. Vou exemplificar minha necessi...
GD
Uso de TAB para navegar nos campos de um formulário  
Olá. Preciso de uma ajuda em um problema que estou tendo. Tenho uma tela onde preciso passar de um campo para outro mediante uso da tecla TAB (ou alternativamente as setas para esquerda e para direita do teclado). Isto é pedido de um cliente para agilizar digitação de trabalhos repetitivos em uma tela de coleta de dados medidos em laboratório interno do cliente. Vou exemplificar minha necessidade:

Imagine um tela contendo quatro campos para digitação: cep, logradouro, numero e complemento, um botão "salvar" e um botão "sair". Os campos devem ser "percorridos" nesta ordem. Se eu pressionar TAB no campo cep o cursor deve pular para o campo logradouro, se for pressionada novamente o cursor deve pular para o campo número e assim por diante. Se TAB for pressionada no botão "sair" o cursor deve voltar para o campo CEP. A combinação Shift+TAB faz o sentido inverso. Nas telas que desenvolvi utilizando o framework a navegação via tecla TAB não funciona nem as setas do teclado. Esqueci de setar alguma coisa que ative esse tipo de comportamento ou tenho que implementá-lo manualmente E se for manualmente será que podem me dar uma orientação de como posso fazer?

Agradeço desde já qualquer ajuda.

Curso Dominando o Adianti Framework

O material mais completo de treinamento do Framework.
Curso em vídeo aulas + Livro completo + Códigos fontes do projeto ERPHouse.
Conteúdo Atualizado!


Dominando o Adianti Framework Quero me inscrever agora!

Comentários (3)


PD

Oi Gabriel,

O normal do Framework ao usar a classe BootstrapFormBuilder é a passagem com TAB.
Testei agora e está funcionando, no exemplo do Tutor, veja:
https://framework.adianti.me/tutor/index.php?class=FormBuilderView
PD

Você também pode usar o atributo tabindex:
https://developer.mozilla.org/pt-BR/docs/Web/HTML/Global_attributes/tabindex
 
  1. <?php
  2. $entry->tabindex = 1;
  3. ?>
GD

Boa tarde Pablo. Desculpe-me a demora do retorno. Examinei a tela do tutor que você indicou mas fiquei com uma dúvida. Se você observar, ao apertar tab nos campos "Password" e "Color" da tela o cursor desaparece (ou não aparece onde está posicionado). Isso é normal?
No caso do tabindex teria que usá-lo manualmente campo por campo da tela?

Aproveitando a oportunidade: Sabe dizer quando será publicada uma nova edição do livro do framework? Tenho a 10ª e ela não tem as novidades das versões 7.4 e 7.5 do framewok.

Obrigado pela resposta.