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?