ng-blur 不使用输入数字在 firefox 上触发事件答案

【问题标题】：ng-blur don't fire event on firefox with input numberng-blur 不使用输入数字在 firefox 上触发事件
【发布时间】：2015-12-09 10:23:41
【问题描述】：

我正在尝试在 firefox 上使用带有 html 输入 (type=number) 元素的 ng-blur。

我发现的问题是，当使用输入数字的向上和向下箭头时，Firefox 不会触发模糊和焦点事件，而使用 chrome 可以正常工作。

您可以在http://jsfiddle.net/chonw54e/ 中重现该问题

<div ng-app ng-init="focus=false;blur=false;active=false">
    <input type="number" ng-class="{ myFocus: focus, myBlur: blur }"    ng-focus="focus=true;blur=false;" ng-blur="blur=true;focus=false;">
    <p>focus: {{focus}}</p>
    <p>blur: {{blur}} </p>
</div>

只需加载页面（同时使用 firefox 和 chrome）并单击 html 输入数字的向上/向下箭头

input number

我做错了什么？

感谢您的帮助！

编辑： 2015 年 11 月 12 日

@Arg0n 的解决方案解决了这个问题。但是，它看起来像是 firefox 或 angularjs 的问题。

我刚刚在 angular github here 上创建了一个问题

这不是角度问题。这是由于firefox的事件行为在单击输入内的箭头时没有聚焦输入（我认为这是一个错误）。

编辑：2015 年 12 月 14 日

在 bugzilla 中创建的 Firefox 问题：https://bugzilla.mozilla.org/show_bug.cgi?id=1232233

【问题讨论】：

啊，现在我明白你的意思了。当你点击箭头时...
是的，当您单击“输入的空白”时它可以工作，但会出现箭头失败。感谢您的回答！
我遇到了同样的问题，我使用 ngModelChange 而不是 Blur Event，效果很好。

标签： javascript angularjs firefox onblur

【解决方案1】：

您可以使用 jQuery 解决此问题，请参阅 this fiddle：

JavaScript

$(function(){
  $("input[type='number']").on("click", function(){
    $(this).focus();
  });
});

如果没有 jQuery，请参阅 this:

JavaScript

document.onreadystatechange = function() {
  if (document.readyState == "complete") {
    var inputs = document.querySelectorAll('[type="number"]');
    for (var i = 0; i < inputs.length; i++) {
      inputs[i].onclick = function() {
        this.focus();
      }
    }
  }
}

这将强制浏览器在单击input 时将其聚焦。（Input 与 type 设置为 number）。

【讨论】：

非常感谢！这很好，但我只使用 AngularJS（这是项目的要求）。我想知道这是角度问题还是浏览器问题。我找不到问题...再次感谢！
您能解释一下您的解决方案吗？
Arg0n 感谢您的帮助。我用你的提议分叉了第一个 jsfiddle 并且它有效。你可以在这里查看新代码jsfiddle.net/4ksywa6d/1
@R3tep Arg0n 的解决方案是找到所有带有类型编号的输入并为每个输入设置焦点。这样，当焦点丢失时（在输入外部单击），就会触发模糊。我说得对吗，@Arg0n？
@CarlosVicient 不完全是，它会找到所有类型为编号的输入（到目前为止你是正确的），但它没有设置焦点。它绑定了一个onclick 事件，当您单击输入内的任意位置（包括箭头）时，输入将获得焦点。

【解决方案2】：

如果您有一个字段或使用 Angularjs 的 ng-repeat，一个简单的 onclick="this.focus();" 将同样有效且简单得多。

【讨论】：