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

• javascript
• angularjs
• firefox
• onblur

• 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

2 Answers 2

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.