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

[Ederson Mendes Goulart 1]

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();					
																	
				}	        
		    });
		}		
	});	
}

 

[Wesley Santos 28]

Que da hora!

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

[Ederson Mendes Goulart 1]

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>