Angular - Update <input> value on 'enter' keypress - And work in IE

Question

I'm wanting to control the updates of <input> values to the 'enter' keypress. (I also update when they leave the field - but that's not the problematic part)

There's a number of answers showing how to use:

 '<input ng-model-options="{updateOn : 'change blur'}" [...] />

Which does work in Chrome & Firefox - But not in IE (11, in my testing). (In theory - the change event should cover the enter keypress).

My question: Is there a different set of events I can bind to? I'ave made a Plunker example to show/verify the issue.

I'm unsure if IE simply doesn't fire the change event (when pressing enter), I have the wrong events, or if it's a bug in Angular.

(Note: At the time of writing, this is Angular 1.4.3)

Answer 1

You can achieve this behaviour by creating a directive called updateOnEnter and then adding this attribute to your HTML element. This code works in all major browsers.

<input id="search_input" type="text" update-on-enter ng-model="filter.search_terms">

angular.module('app').directive('updateOnEnter', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ctrl) {
            element.bind("keyup", function(ev) {
                if (ev.keyCode == 13) {
                    ctrl.$commitViewValue();
                    scope.$apply(ctrl.$setTouched);
                }
            });
        }
    }
});