2

Criei uma diretiva para mover o cursor para o próximo campo quando atingir o tamanho máximo de caracteres, desta forma abaixo:

var app = angular.module("myApp", []);

app.directive("moverProximoCampo", function() {
    return {
        restrict: "A",
        link: function($scope, element) {
            element.on("input", function(e) {
                if(element.val().length == element.attr("maxlength")) {
                    var $nextElement = element.next();
                    if($nextElement.length) {
                        $nextElement[0].focus();
                    }
                }
            });
        }
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="myApp">
    <form>
    <input type="text" id="part1" ng-model="form.part1" maxlength="3" placeholder="3 caracteres" mover-proximo-campo />
    <input  placeholder="2 caracteres"  type="text" id="part2" ng-model="form.part2" maxlength="2" mover-proximo-campo /> 
    <input  placeholder="7 caracteres"  type="text" id="part3" ng-model="form.part3" maxlength="7" mover-proximo-campo />
</form>
</div>

Porém se eu colocar qualquer elemento entre esses inputs, como uma div, o próximo input não é focado. Vejam:

var app = angular.module("myApp", []);

app.directive("moverProximoCampo", function() {
    return {
        restrict: "A",
        link: function($scope, element) {
            element.on("input", function(e) {
                if(element.val().length == element.attr("maxlength")) {
                    var $nextElement = element.next();
                    if($nextElement.length) {
                        $nextElement[0].focus();
                    }
                }
            });
        }
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="myApp">
    <form>
    <input type="text" id="part1" ng-model="form.part1" maxlength="3" placeholder="3 caracteres" mover-proximo-campo />
    <div> Tem uma div aqui entre os inputs</div>
    <input  placeholder="2 caracteres"  type="text" id="part2" ng-model="form.part2" maxlength="2" mover-proximo-campo /> 
    <div> Tem outra div aqui entre os inputs</div>
    <input  placeholder="7 caracteres"  type="text" id="part3" ng-model="form.part3" maxlength="7" mover-proximo-campo />
</form>
</div>

Na verdade, a ideia seria focar no próximo input, mas não no próximo elemento. Qual seria a forma mais prática de resolver isso?

2 Respostas 2

2
+50

Pego o elemento pai e busco os elementos de input.
Busco pela posição do elemento atual e atribuo o elemento do próximo índice num variável para depois utiliza-la para dar o foco.
Usei o forEach do angular para achar o índice, mas se importasse o JQuery no html daria pra usar o inArray. (incluí um exemplo comentado).
Troquei o evento de input para keyup.

var app = angular.module("myApp", []);
app.directive("moverProximoCampo", function() {
return {
    restrict: "A",
    link: function($scope, element) {
        var inputs = element.parent().find('input');
        //com JQlite
        var $nextElement = []; 
        angular.forEach(inputs, function(elem,index){
            if(elem == element[0]){
                $nextElement = inputs.eq(index+1);
            }
        })
        //Se usar o JQuery ao invés do JQlite
        //var index = angular.element.inArray(element[0], inputs);
        //var $nextElement = inputs.eq(index+1);
        
        element.on("keyup", function(e) {
            if(element.val().length == element.attr("maxlength")) {
                if($nextElement.length) {
                    $nextElement[0].focus();
                }
            }
        });
    }
}
});
<!-- <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="myApp">
    <form>
    <input type="text" id="part1" ng-model="form.part1" maxlength="3" placeholder="3 caracteres" mover-proximo-campo />
    <div> Tem uma div aqui entre os inputs</div>
    <input  placeholder="2 caracteres"  type="text" id="part2" ng-model="form.part2" maxlength="2" mover-proximo-campo /> 
    <div> Tem outra div aqui entre os inputs</div>
    <input  placeholder="7 caracteres"  type="text" id="part3" ng-model="form.part3" maxlength="7" mover-proximo-campo />
</form>
</div>

2

Eu particularmente gosto de descomplicar as coisas. Por que a diretiva deveria adivinhar qual é o próximo input, sendo que eu mesmo posso informá-lo na declaração da diretiva mover-proximo-campo?

Veja o exemplo que fiz:

var app = angular.module("myApp", []);

app.directive("moverProximoCampo", function() {
    return {
        restrict: "A",
        link: function($scope, element, attr) {
          
            var proximoId = attr.moverProximoCampo;
            
            element.on("input", function(e) {
                if(element.val().length == element.attr("maxlength")) {
                    
                    document.querySelector(proximoId).focus();
                }
            });
        }
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="myApp">
    <form>
    <input type="text" id="part1" ng-model="form.part1" maxlength="3" placeholder="3 caracteres" mover-proximo-campo="#part2" />
    <div> Tem uma div aqui entre os inputs</div>
    <input  placeholder="2 caracteres"  type="text" id="part2" ng-model="form.part2" maxlength="2" mover-proximo-campo="#part3" /> 
    <div> Tem outra div aqui entre os inputs</div>
    <input  placeholder="7 caracteres"  type="text" id="part3" ng-model="form.part3" maxlength="7" />
</form>
</div>

Observe que o que eu fiz foi alterar a declaração da diretivas do seus inputs, informando, como parâmetro, qual é o próximo elemento que eu deveria focar. Ou seja, na diretiva, você passa o id do próximo elemento desejado para o foco, quando a condição for atendida.

Mais ou menos assim:

<input mover-proximo-campo="#campo2" id="campo1" />
<input id="campo2" mover-proximo-campo="#campo3" />
<input id="campo3"  />
3
  • A ideia é boa, porém quando eu (depois de ter preenchido todos os campos) dou foco no input (clico no campo) e insiro algum carácter, ele não passa para o próximo. Talvez há ainda alguma forma de melhorar o código. +1
    – viana
    Commented 4/07/2018 às 16:55
  • Entendi, é que isso não foi citado na pergunta, mas posso ver se consigo editar o código para aplicar o efeito desejado. Commented 4/07/2018 às 16:57
  • 1
    Desculpem, mas eu estive analisando o comentário do @Viana e não vi problema algum como ele citou. Sempre que o limite de caractere for alcançado está passando para o próximo campo normal.
    – Sam
    Commented 5/07/2018 às 5:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .