Publicado em 24 de jul.

Ir para próximo campo{ Focus() } no formulário quando chegar no limite do maxlength

Boa tarde!

Criei um método que percorre todos os campos do formulário e aplica a regra de quando chegar no limite do campo, aplica focus no próximo campo. Bem legal para formulários, segue:

window.onload = function(){
	var allEl = $("#content input, #content textarea, #content select, #content checkbox");
	allEl.each(function(){

 var campoAtual = $(this);
 var maxlength = campoAtual.attr("maxlength");

 if (!isEmpty(maxlength)){

 $(this).keyup(function () {

 //Pega posição do focus do campo, quando chegar no ultimo focus, entra na rotina para ir para proximo campo
 var positionFocus = this.selectionStart;

 //Se chegar no limite
 if (maxlength == campoAtual.val().length && positionFocus == maxlength ){

 var nomeCampoAtual = campoAtual.attr("name");

 var encontrouCampo = false;

 var idxProxCampo = 0;

 for (var i=0; i < allEl.length; i++) {

 if (!encontrouCampo){

 if ( nomeCampoAtual == allEl.eq(i).attr('name') ){
 idxProxCampo = i+1;
 encontrouCampo = true;
 }
 }

 if (encontrouCampo){

 var tagPai = allEl.eq(idxProxCampo).parent();

 if (tagPai.is(':visible')){

 break;

 //Se o campo não tiver visivel soma +1 para verificar o proximo campo da lista
 }else{
 idxProxCampo = idxProxCampo + 1;
 }
 }
 };

 allEl.eq(idxProxCampo).focus();

 }
 });
 }
	});
}

Discussão (2)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Wesley Santos· 24 de jul.

Que da hora!

Se possível sobe no CodePen ou JSFiddle, fica mais fácil para testar :D

Ederson Mendes Goulart· 25 de jul.

Obrigado Wesley.

Apenas reforçando a explicação da funcionalidade:

O ID '#content' é o id da masterpage, ou oque circula todo formulário.

A rotina tbm faz uma verificação se o próximo campo está escondido ou não no formulário, e vai procurar até achar o proximo campo que esteja visível, comparando sempre pela div pai de cada campo.

Segue exemplo:

<div id="content">

 <form>
 <div class="row" <?php if ($_SESSION[sn]['confs']['osDadosCondutorVis'] == 'F') { echo 'style="display: none;"'; } ?>>
 <label for="nomeCondutor">Nome Condutor: <?php req('nomeCondutor'); ?></label>
 <input id="nomeCondutor" class="text" name="nomeCondutor" type="text" size="31" maxlength="10" > />
 </div>

 <div class="row" <?php if ($_SESSION[sn]['confs']['osDadosCondutorVis'] == 'F') { echo 'style="display: none;"'; } ?>>
 <label for="cpfCondutor">CPF Condutor: <?php req('cpfCondutor'); ?></label>
 <input id="cpfCondutor" class="text" name="cpfCondutor" type="text" size="20" maxlength="10" />
 </div>

 <div class="row" <?php if ($_SESSION[sn]['confs']['osDadosCondutorVis'] == 'F') { echo 'style="display: none;"'; } ?>>
 <label for="telCondutor">Tel Condutor: <?php req('telCondutor'); ?></label>
 <input id="telCondutor" class="text" name="telCondutor" type="text" size="15" maxlength="10" />
 </div>
 </form>
</div>