I have an asp mvc page. I have a textbox which when a value is entered, and went off of the box should execute a javascript function which will roundup the value in the textbox. This works fine in Chrome and IE but not in FireFox.

The following is the code. setAmount() is the javascript function which is supposed to be executed.

<div class="amount-other-input">
    <div class="bold-label" style="margin-right:5px;">£</div>
    <input id="amountOther" type="number" name="other" onblur="setAmount(this)" class="numbersOnly" maxlength="4">
</div>

I tried in adding a timer as suggested in another stackoverflow answer as shown below, but didin't work:

document.getElementById('amountOther').addEventListener("blur", function() {
        var element = this;
        setTimeout(function() {
            setAmount(element);
        }, 1);
    }, true);

I have an asp mvc page. I have a textbox which when a value is entered, and went off of the box should execute a javascript function which will roundup the value in the textbox. This works fine in Chrome and IE but not in FireFox.

The following is the code. setAmount() is the javascript function which is supposed to be executed.

<div class="amount-other-input">
    <div class="bold-label" style="margin-right:5px;">£</div>
    <input id="amountOther" type="number" name="other" onblur="setAmount(this)" class="numbersOnly" maxlength="4">
</div>

I tried in adding a timer as suggested in another stackoverflow answer as shown below, but didin't work:

document.getElementById('amountOther').addEventListener("blur", function() {
        var element = this;
        setTimeout(function() {
            setAmount(element);
        }, 1);
    }, true);

• javascript
• jquery

• You shouldn't be using onblur in your HTML and addEventListener in your code. Use just the latter, and put your script at the foot of your page. – user1864610 Commented Mar 19, 2015 at 3:40
• That code does work and I am using firefox – floor Commented Mar 19, 2015 at 3:40

4 Answers 4

Finally I have resolved it as follows:

1. By adding an onchange event

2. Calling a method to focus for onchange

   function setFocus(sender){ $(sender).focus(); };

As mentioned by @Hobo Sapiens, don't add the blur event on both the html and event listener. Just call the function directly on the onblur event from the html.

Here is a fiddle for it: http://jsfiddle/pyjtL456/2/

Also, what version of firefox are you checking this on?

After looking at the problem. I would suggest you adopt this approach. Here is the HTML snippet:

<div class="amount-other-input">
    <div class="bold-label" style="margin-right:5px;">£</div>
    <input id="amountOther" type="number" name="other" onblur="setAmount(this)" class="numbersOnly" maxlength="4" />
    <input id="amountOther2" type="number" name="other" class="numbersOnly" maxlength="4" />
</div>

Javascript Snippet:
<script>

    //When using the onblur property with setAmount as the value
    function setAmount(element) {
        console.log(element.value);
    }

    //When adding the blur event dynamically    
    var amountElement = document.getElementById('amountOther2');
    amountElement.addEventListener('blur', function(){
            setTimeout(setAmount(this), 1);
    });
</script>