I have an input field. Under certain conditions I want to keep the user focused on the input field when they hit the Tab key. Basically I'm mimicking the functionality of Google's auto populating search box. I have everything working fine in every browser except the one I never have problems with... Firefox!?

The following code works as expected in IE, Chrome and Safari, if you Tab out of the textbox with class myInput, your focus stays in the textbox. But in Firefox, when you Tab out of the textbox, you will go to the next textbox. (This is a very simplified version of what I am doing. If I can get this to work, I'll be able to get my real code to work.)

$(document).ready(
    function()
    {               
        $(".myInput").blur
        (
            function()
            {
                $(this).focus();
                $(this).select();
            }
        );      
    }
);

PS. Please don't suggest a fix using setTimeout(). Thanks.

I have read articles describing how jQuery has .focus() and javascript has .focus() and how they are not the same. I understand this (I think), but I still am not able to figure out what I am doing wrong.

ADDED... I can get it to work this way

$(document).ready(
    function()
    {               
        $(".myInput").blur
        (
            function()
            {
                setTimeout("$('.myInput').focus();",1);
            }
        );      
    }
);

Seems hackish but I can't figure out why Firefox won't set focus on blur. So, if any of you have the answer, it would be nice to know.

I have an input field. Under certain conditions I want to keep the user focused on the input field when they hit the Tab key. Basically I'm mimicking the functionality of Google's auto populating search box. I have everything working fine in every browser except the one I never have problems with... Firefox!?

The following code works as expected in IE, Chrome and Safari, if you Tab out of the textbox with class myInput, your focus stays in the textbox. But in Firefox, when you Tab out of the textbox, you will go to the next textbox. (This is a very simplified version of what I am doing. If I can get this to work, I'll be able to get my real code to work.)

$(document).ready(
    function()
    {               
        $(".myInput").blur
        (
            function()
            {
                $(this).focus();
                $(this).select();
            }
        );      
    }
);

PS. Please don't suggest a fix using setTimeout(). Thanks.

I have read articles describing how jQuery has .focus() and javascript has .focus() and how they are not the same. I understand this (I think), but I still am not able to figure out what I am doing wrong.

ADDED... I can get it to work this way

$(document).ready(
    function()
    {               
        $(".myInput").blur
        (
            function()
            {
                setTimeout("$('.myInput').focus();",1);
            }
        );      
    }
);

Seems hackish but I can't figure out why Firefox won't set focus on blur. So, if any of you have the answer, it would be nice to know.

• javascript
• jquery
• focus
• setfocus

• Have you tried debugging your code? What's $(this) referring to inside your blur handler? Does it even fire? – Mike Dinescu Commented Mar 16, 2011 at 15:49
• I guess I have made an assumptions that $(this) is referring to the $(".myInput") the text box since this code is working in Chrome and IE. This code will not let you tab out of the textbox with class .myInput in both IE and Chrome, so I'm assuming $(this) is targeting correctly. And my FireFox error console is not reporting any errors. – Stephen Stanley Commented Mar 16, 2011 at 16:05
• stackoverflow./questions/4236477/… stackoverflow./questions/4640687/… – Fraser Commented Mar 16, 2011 at 16:22

3 Answers 3

As you are using jQuery should use the .focusout() method.

http://api.jquery./focusout/

This is distinct from the blur event in that it supports detecting the loss of focus from parent elements (in other words, it supports event bubbling).

I was able to resolve my situation by avoiding my question above.

Since I am dealing with the Tab key, instead of trying to place the focus back in the field that the user tabbed out of (like my attempt above), I used preventDefault() on the Tab key. Therefore focus is never lost, and I don't have to worry about replacing it.

displayTextBox.keydown
(
    function(event)
    {           
        // 9 = Tab Key
        if (event.keyCode == "9")
        {
            event.preventDefault();
        }
    }
);

I have not thoroughly tested this, but it seems to work so far in FF, Chrome and IE.

Try to use the html attribute onfocusout