How to focus to next field when field value reaches a max length

Question

I have a scenario where I have two or more textarea, when user enters the value in the textarea and when the values reaches to max-length for example ng-max-length is 15, the focus should automatically move to next text-area.

How this can be achieved?

For controlling the max-length I have taken solution from this link .

But i do not know how to make the focus to next element automatically

Below i have given the code which i tried

textarea.html

<!DOCTYPE html>

<html>
    <head>
        <title>Angular App</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
      <div ng-app="taApp">
       <div ng-controller="taController">
         <textarea my-maxlength="15" ng-model="ta1.text1" rows="4" cols="20"> </textarea>
         <textarea my-maxlength="15" ng-model="ta2.text2" rows="4" cols="20"> </textarea>

         <textarea my-maxlength="15" ng-model="ta3.text3" rows="4" cols="20"> </textarea>
       </div>
      </div>

      <script src="js/libs/angularjs-1.0.2/angular.js" type="text/javascript"></script>
      <script src="js/controller/pageController.js" type="text/javascript"></script>
      <script src="js/controller/textAreaFocus.js" type="text/javascript"></script>
    </body>
</html>

textAreaFocus.js

angular.module('textareafocus',[]).directive('myMaxlength', function() {
  return {
    require: 'ngModel',
    link: function (scope, element, attrs, ngModelCtrl) {
      var maxlength = Number(attrs.myMaxlength);
      function fromUser(text) {
          if (text.length > maxlength) {
            var transformedInput = text.substring(0, maxlength);
            ngModelCtrl.$setViewValue(transformedInput);
            ngModelCtrl.$render();

            return transformedInput;
          } 
          return text;
      }
      ngModelCtrl.$parsers.push(fromUser);
    }
  }; 
});

pageController.js

var taApp = angular.module('taApp',["textareafocus"]); // this creates a new angular module named "myApp";

taApp.controller('taController', function ($scope,$http) {

     $scope.ta1 = { text1: 'TextArea 1'};

     $scope.ta2 = { text2: 'TextArea 2'};

     $scope.ta3 = { text3: 'TextArea 3'};

});

Screenshot

enter image description here

Currently i have only 3 textarea but it could be more, therefore focus should move to next element automatically.

I tried with element[ 1 ].focus() but it doesn't works.

Kindly help me how to resolve this issue.

score 11 · Answer 1 · answered Aug 17 '14 at 11:10

You can implement a custom directive that requires jQuery to find the other text areas, ngMaxlength to determine the maximum length (this can be changed to a custom attribute), and tabindex to determine tab order:

Directive

app.directive('autoNext', function() {
    return {
       restrict: 'A',
       link: function(scope, element, attr, form) { 
           var tabindex = parseInt(attr.tabindex);
           var maxLength = parseInt(attr.ngMaxlength);
           element.on('keypress', function(e) {
               if (element.val().length > maxLength-1) {
                  var next = angular.element(document.body).find('[tabindex=' + (tabindex+1) + ']');
                  if (next.length > 0) {
                      next.focus();
                      return next.triggerHandler('keypress', { which: e.which});
                  }
                  else  {
                      return false;                          
                  }
               }
               return true;
           });

       }
    }
});

HTML

<textarea ng-maxlength="10" tabindex="1" auto-next></textarea>
<textarea ng-maxlength="10" tabindex="2" auto-next></textarea>
<textarea ng-maxlength="10" tabindex="3" auto-next></textarea>

Demo Fiddle

@ pixelbits :- I have used the given directive in textAreaFocus.js by commenting the above which i already given, then I used the same html code given and i'm using jquery-2.1.1.min.js version but it doesn't works as excepted. do i make any mistakes — Arun, Aug 18 '14 at 08:25
@pixelbits I've change the 'keypress' for 'keyup' on the directive to have the same behavior in IE11. — napstercake, Aug 09 '15 at 00:45
This is spot on solution for me, but while typing, then focus goes to next tab; that character skips. If anyone face that issue then just replace 'keypress' with 'keyup'. — Khateeb321, Mar 29 '17 at 08:25
The "keyup" variant will prevent going back via "shift + tab" though. :-( — Vortilion, May 09 '19 at 13:21

score 1 · Answer 2 · answered Aug 17 '14 at 10:22

1

Can't you use jQuery in your textarea.html? If you can, then here's a solution:

$("textarea").keyup(function(event) {
    if ($(this).val().length == $(this).attr("maxlength")) {
        textfields = $("textarea");
        curr = textfields.index(this);
        next = textfields[curr + 1];
        if (next != null) {
            next.focus();
        }
    }
});

JSFiddle Link: http://jsfiddle.net/a2gtnmrm/

answered Aug 17 '14 at 10:22

Tibor B.

1,680
1
10
12

@ Tibor B :- As per your advise i placed the code inside the below function inisde – Arun Aug 18 '14 at 08:27
by using this code, facing issue of using backspace in firefox browser. It's not working. – Nishant Dec 04 '17 at 09:42

How to focus to next field when field value reaches a max length

2 Answers2