I have an object variable in my controller (var myObject), divided into 3 input text in the IHM.
I want to change automatically the focus to the next input when the focused one reached the maxLength.
var myObject = {
part1:"",
part2:"",
part3:""
}
<form>
<input type="text" id="part1" ng-model="myObject.part1" maxlength="7"/>
<input type="text" id="part2" ng-model="myObject.part2" maxlength="12"/>
<input type="text" id="part2" ng-model="myObject.part2" maxlength="12"/>
</form>
You'd need to use a directive for this:
app.directive("moveNextOnMaxlength", 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();
}
}
});
}
}
});
And update your form as follows:
<form>
<input type="text" id="part1" ng-model="myObject.part1" maxlength="7" move-next-on-maxlength />
<input type="text" id="part2" ng-model="myObject.part2" maxlength="12" move-next-on-maxlength />
<input type="text" id="part2" ng-model="myObject.part2" maxlength="12"/>
</form>
Demo
You could move the directive onto the <form>
element instead, but the build-int jqLite's find()
method will restrict you to only finding elements by tag name. If you're using full jQuery, or can use vanillaJS instead, I would suggest this method.
Accepted answer works, but only if the fields are immediate siblings. If for example you have 3 fields each in there own column, you need a different solution:
angular
.module('move-next-directive', [])
.directive('moveNextOnMaxlength',
function() {
return {
restrict: "A",
link: function(scope, elem, attrs) {
elem.on('input', function(e) {
var partsId = attrs.id.match(/focus(\d+)/);
var currentId = parseInt(partsId[1]);
var l = elem.val().length;
if (l == elem.attr("maxlength")) {
nextElement = document.querySelector('#focus' + (currentId + 1));
nextElement.focus();
}
});
}
}
}
);
Add a numbered "focus" id to each input field:
<div class="row">
<div class="col-xs-4">
<input type="text" id="focus1" maxlength="4" move-next-on-maxlength />
</div>
<div class="col-xs-4">
<input type="text" id="focus2" maxlength="4" move-next-on-maxlength />
</div>
<div class="col-xs-4">
<input type="text" id="focus3" maxlength="4" />
</div>
</div>
Credits to this answer: https://stackoverflow.com/a/33007493/3319392
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With