最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - ng-blur don't fire event on firefox with input number - Stack Overflow

programmeradmin1浏览0评论

I am trying to use ng-blur with an html input (type=number) element on firefox.

The problem I found is that when using the up and down arrows of the input number neither the blur nor the focus events are fired with firefox whereas with chrome works fine.

You can reproduce the issue in /

<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>

Just load the page (with both firefox and chrome) and click on the up/down arrows of the html input number

input number

What am I doing wrong?

Thanks for the help!

EDIT: 11/12/2015

@Arg0n's solution fix the problem. However, it looks like a problem of either firefox or angularjs.

I have just created an issue on angular github here

It is not an angular problem. It is due to the firefox's event behaviour which don't focus the input when clicking the arrows inside the input (which in my opinion is a mistake).

EDIT: 14/12/2015

Firefox Issue created in bugzilla: .cgi?id=1232233

I am trying to use ng-blur with an html input (type=number) element on firefox.

The problem I found is that when using the up and down arrows of the input number neither the blur nor the focus events are fired with firefox whereas with chrome works fine.

You can reproduce the issue in http://jsfiddle/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>

Just load the page (with both firefox and chrome) and click on the up/down arrows of the html input number

input number

What am I doing wrong?

Thanks for the help!

EDIT: 11/12/2015

@Arg0n's solution fix the problem. However, it looks like a problem of either firefox or angularjs.

I have just created an issue on angular github here

It is not an angular problem. It is due to the firefox's event behaviour which don't focus the input when clicking the arrows inside the input (which in my opinion is a mistake).

EDIT: 14/12/2015

Firefox Issue created in bugzilla: https://bugzilla.mozilla/show_bug.cgi?id=1232233

Share Improve this question edited Dec 14, 2015 at 7:52 Carlos Vicient asked Dec 9, 2015 at 10:23 Carlos VicientCarlos Vicient 1132 silver badges7 bronze badges 3
  • Ah, now i see what you mean. When you click on the arrows... – Arg0n Commented Dec 9, 2015 at 10:30
  • Yes, it works when you click on the "white space of the input" but fails with the arrows. Thanks for answering! – Carlos Vicient Commented Dec 9, 2015 at 10:36
  • I had the same problem, i used ngModelChange instead of Blur Event, it worked perfectly. – Saad Joudi Commented Jan 14, 2020 at 9:31
Add a ment  | 

2 Answers 2

Reset to default 6

You can fix this with jQuery, see this fiddle:

JavaScript

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

Without jQuery, see this:

JavaScript

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

This will force the browser to focus on the input when it's clicked. (Input with type set to number).

A simple onclick="this.focus();" will work as nicely and much simpler if you have one field or using Angularjs's ng-repeat.

发布评论

评论列表(0)

  1. 暂无评论