change focus to the next input text with angularjs

Question

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>

Maybe, the following may be helpful: http://stackoverflow.com/questions/18086865/angularjs-move-focus-to-next-control-on-enter — Eduardo Cuomo, Apr 30 '16 at 22:03

score 12 · Accepted Answer · answered Feb 11 '15 at 08:49

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.

Thank you for that but you can't compare an 'int' with a 'String': should be: if(element.val().length == element[0].maxLength)... — grindking, Sep 05 '16 at 08:34
@grindking Of course you can, this is Javascript! :) `12 == "12"`. As long as you don't use *strict* equality, you'll generally be fine. — CodingIntrigue, Sep 05 '16 at 08:39
@CodingIntrigue Didn't work for me because of that reason: 'use strict'; Thank you anyway. ;) — grindking, Sep 05 '16 at 08:43

Jette · Answer 2 · 2017-09-27T13:33:03.077

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

I used this version as my inputs were in different spans, thanks. I did have to change your regex to allow for more than 10 elements, this allows an infinite number named focus*: `var partsId = attrs.id.match(/focus(\d+)/);` — Eric Soyke, Sep 26 '17 at 19:00
Thanks @eric ... I have edited the code as suggested to allow an infinite number of focus fields. — Jette, Sep 27 '17 at 13:36

change focus to the next input text with angularjs

2 Answers2

Linked