角度-更新< input> “输入"按键的价值-在IE中工作 [英] Angular - Update <input> value on 'enter' keypress - And work in IE

问题描述

我想控制<input>值对输入"按键的更新. (我也会在他们离开现场时进行更新-但这不是有问题的部分)

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'}" [...] />

在Chrome& Firefox-但不是在IE 中(在我的测试中为11). (从理论上讲，change事件应涵盖Enter键).

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

我的问题:我可以绑定一组不同的事件吗?我已经制作了一个Plunker示例来显示/验证该问题.

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

我不确定IE是否只是不触发change事件(按Enter键时)，发生错误的事件还是Angular中的错误.

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.

(注意:在撰写本文时，这是Angular 1.4.3)

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

推荐答案

您可以通过创建名为updateOnEnter的指令，然后将此属性添加到HTML元素中来实现此行为.该代码可在所有主流浏览器中使用.

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);
                }
            });
        }
    }
});

这篇关于角度-更新< input> “输入"按键的价值-在IE中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！