.focus() onblur not working in Mozilla

Question

I have a textbox where I'm trying to focus when blur event is triggered as follows:

<input type='text' onblur="$(this).focus()"/>

This works perfectly in Chrome and IE, but fails in Mozilla.

How do I solve this?

Here's the Problem.

Answer 1

Introduce a timer to make sure that your code runs in an event loop separate from the one triggering the "blur" event:

document.getElementsByTagName("input")[0].addEventListener("blur", function() {
    var element = this;
    setTimeout(function() {
        element.focus();
    }, 1);
}, true);

Forked fiddle.

Answer 2

Try to use this. form,

    <form>
        Name: <input type='text' name='name'></input>
    </form>

JQuery

$(document).ready(function(){
   setupForms();
});

function setupForms(){
    $('input').focus(function(){
        $(this).css('outline-color', '#FF0000');
    });
}