How to simulate a tab keypress with angular

Question

I'm interested in doing a very simple auto tabbing function. I'd like to programmatically press "tab" for the visitor. I can't seem to figure out how to accomplish this in standard JS (ie - not using jQuery's .trigger()).

Usage: <input auto-tab="3">

directive('autoTab', [function () {
        return {
            restrict: "A",
            scope: false,
            link: function (scope, el, attrs) {
                el.bind('keyup', function () {
                    if (el.val().length >= attrs.autoTab) {
                        //document.dispatchEvent();
                    }
                });
            }
        }
    }])

Answer 1

I don't think that is possible. Check out this post and this SO question:

Note that manually firing an event does not generate the default action associated with that event. For example, manually firing a focus event does not cause the element to receive focus (you must use its focus method for that), manually firing a submit event does not submit a form (use the submit method), manually firing a key event does not cause that letter to appear in a focused text input, and manually firing a click event on a link does not cause the link to be activated, etc. In the case of UI events, this is important for security reasons, as it prevents scripts from simulating user actions that interact with the browser itself.

You could try a different approach: change your directive so it receives the id of the element that should be focused next:

app.directive('autoTabTo', [function () {
  return {
    restrict: "A",
    link: function (scope, el, attrs) {
      el.bind('keyup', function(e) {
        if (this.value.length === this.maxLength) {
          var element = document.getElementById(attrs.autoTabTo);
          if (element)
            element.focus();
        }
      });
    }
  }
}]);

And then you could use it like this:

<input type="text" id="input1" auto-tab-to="input2" maxlength="5"/>
<input type="text" id="input2" auto-tab-to="input1" maxlength="3"/>

Working demo here.

It's not exactly what you want, but I'm afraid it's not possible to do it by simulating a TAB keystroke.

Answer 2

i think this one is better no need to mention id for input element

app.directive('autoTabTo', [function () {
  return {
    restrict: "A",
    link: function (scope, el, attrs) {
    el.bind('keyup', function(e) {
       if (this.value.length === this.maxLength) {
                 var inputs = $(this).closest('form').find(':input');
                 inputs.eq( inputs.index(this)+ 1 ).focus();
        }
      });
    }
   }
}]);