AngularJS 中的 oninput 事件属性答案

【问题标题】：oninput event attribute in AngularJSAngularJS 中的 oninput 事件属性
【发布时间】：2015-04-03 09:38:39
【问题描述】：

我正在构建一系列输入字段，它们会在达到最大长度时自动制表。这通过检查ng-keyup 事件上的值的长度来工作，但这有一个小问题，可以通过使用oninput 事件来解决。但是，这似乎在 Angular 中不存在？

我要解决的问题：

当我快速输入最大数量的字符（在我的情况下是两个数字，可以非常快地输入）时，第一个 keyup 在输入两个字符并跳到下一个字段后触发。第二个keyup 仅在制表符后注册，因此它会在下一个字段上触发。这会导致不必要的行为。

要重现检查this fiddle（jQuery，因为它可以让我快速重现我正在寻找的问题和解决方案），填写“月”和“年”字段，然后在“天”字段。如果做得足够快，焦点会一直跳到“年”（因为第二个 keyup 在“月”处于焦点时被触发）。

当使用.on('input', ...) 时，这个问题就消失了。但是，我不想在 jQuery 中而是在 Angular 中将其用作属性，例如 ng-keyup。这可能吗？如果不能，我该如何以另一种方式解决这个问题？

【问题讨论】：

这是在指令中吗？你可以在指令中使用.on("input", ...)，不是吗？
@RGraham 我的问题不完整，抱歉。我想在元素上使用类似ng-input="myCallback()" 的属性。

标签： javascript angularjs dom-events

【解决方案1】：

看起来你在那个 jsfiddle 中使用了 jquery。相反，在 Angular 中，要绑定 oninput 事件，您可以使用：

大多数情况下，这种 DOM 操作必须在指令内部进行。只是为了演示，我将它添加到控制器中：

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

【讨论】：

我正在使用 jQuery 来显示问题以及我想如何解决它（但使用 Angular），更新了问题以使其更清楚。我想我无法使用您的答案，因为我想使用 ng- 属性绑定事件。
现在检查，我已经用演示更新了答案。您需要将该代码放在适当的控制器中。您可以改为创建自定义指令并通过它绑定事件。
这似乎是一个很好的解决方案，我希望有一个属性，但由于缺少属性，这将不得不这样做。我会检查这是否适用于我的代码。
太棒了。我已经用一些逻辑更新了focus 事件。仅当存在另一个 input 字段时，它才会专注于该字段，否则它将只是 blur
我正在处理的实际应用程序更大更复杂，我的示例非常基本，只是为了说明问题。无论如何，谢谢，我可以解决这个问题。