oninput event attribute in AngularJS

Issue

I'm building a series of input fields that automatically tab when their max length has been reached. This works by checking the length of the value on the ng-keyup event, but this has a slight problem that can be solved by using the oninput event instead. However, this does not seem to be present in Angular?

The problem I'm trying to solve:

When I rapidly enter the max amount of characters (two digits in my case, which can be entered quite fast) the first keyup fires after both characters are entered and tabs to the next field. The second keyup only registers after tabbing, so it fires on the next field. This causes unwanted behavior.

To reproduce check this fiddle (jQuery, because it allows me to quickly reproduce both the problem and solution I'm looking for), fill in the "month" and "year" fields and then rapidly enter 2 digits in the "day" field. When done fast enough, the focus jumps all the way to "year" (because the second keyup was fired while "month" was in focus).

When using .on('input', ...) instead this problem disappears. However, I would like to use this not in jQuery but in Angular as an attribute, like ng-keyup. Is that possible, and if not how could I fix this problem in another way?

Solution

Looks like you're using jquery in that jsfiddle. Instead in angular, to bind the oninput event, you can use:

Mostly this kind of DOM manipulation must go inside directive. Just for demo sake, am adding it to the controller:

angular.element(document.querySelectorAll("input")).on("input", function (event) {

    var $input = angular.element(event.target),
        maxlength = $input.attr('max').length;

    if (this.value.length >= maxlength) {
        this.nextElementSibling.tagName==="INPUT" ? this.nextElementSibling.focus() : this.blur();
    }

});

DEMO

Answered By - mohamedrias