oninput event attribute in AngularJS

Question

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?

Is this inside a directive? You can just use .on("input", ...) inside the directive, no? — CodingIntrigue
– CodingIntrigue, Commented Apr 3, 2015 at 9:42
@RGraham I was not complete in my question, sorry. I would like to use an ng-input="myCallback()"-like attribute on an element. — Stephan Muller
– Stephan Muller, Commented Apr 3, 2015 at 9:54

mohamedrias · Accepted Answer · 2015-04-03 10:14:56Z

4

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

edited Apr 3, 2015 at 10:14

answered Apr 3, 2015 at 9:49

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Stephan Muller Over a year ago

I'm using jQuery to show the problem and how I'd like to fix it (but using Angular instead), updated the question to make that more clear. I think I'm unable to use your answer, as I'd like to bind the event using an ng- attribute.

mohamedrias Over a year ago

Check now, I've updated the answer with a demo. You need to place that code inside the appropriate controller. You can create a custom directive instead and bind the events via that.

Stephan Muller Over a year ago

This seems like a neat solution, I'd hoped for an attribute but by lack thereof this will have to do. I'll check if this works in my code.

mohamedrias Over a year ago

Great. I've updated the focus event with some logic. Only if there is another input field present it will focus to that else it will just blur

Stephan Muller Over a year ago

The actual application I'm working on is a lot bigger and more complex, my example is very basic just to show the problem. Thanks anyway, I'll be able to work this in.

Collectives™ on Stack Overflow

oninput event attribute in AngularJS

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related