Question

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

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

中重现该问题

<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年12月12日

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

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

这不是一个角度问题。这是因为firefox的事件行为在点击输入内部的箭头时不会集中输入（在我看来这是一个错误）。

编辑：2015年12月14日

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

Answer 1

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

的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）。

Answer 2

如果您有一个字段或使用Angularjs的onclick="this.focus();"，那么简单的ng-repeat会既好又简单。

ng-blur不会在输入号为

2 个答案: