jQuery focus function not working in Firefox

Question

The following piece of code focuses the text input after you click on the link. It works fine for Chrome 2.x, IE8 and Opera 9.64 but not on Firefox 3.0.9. The text input f

Answer 1

I don't know if is this you want. To put focus on the input clicking on the label you can do this:

<label for="text_field">Label</label>
<input type="text" name="text_field" id="text_field" />

OR

<label>Label
<input type="text" name="text_field" id="text_field" />
</label>

Answer 2

You could also be more explicit and call preventDefault on the event arg.

$(document).ready(function()
{
    $("a").click(function(event) {
        var field_id = $(this).attr("href");
        $(field_id).focus()
        event.preventDefault();
    });

});

Answer 3

This should do the trick:

$(function ()
{
    $("a").click(function ()
    {
        $($(this).attr("href")).focus();

        return false; // remember to stop links default action
    });
});

Tested in latest version of Chrome, IE and FireFox.

Answer 4

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> 
<script>
$(function() {
    $("a").click(function() {
        var field_id = $(this).attr("href");
        $("#"+ field_id).focus();
        return false;
    });
});
</script>

<a href="text_field">Focus</a>
<input type="text" name="text_field" id="text_field" />

Answer 5

In addition to the other two answers, the reason your way is not working is because the value of the href field is usually fully qualified with the url (this depends on browser and jQuery doesn't abstract it away).

So if you have an href "#text_field" you may find the actual value of the field is "http://localhost/#text_field" which is why it doesn't match your pattern.

Daniel's suggestion with labels and "for" attributes is a good solution if you want to focus on fields.

Answer 6

As hinted by Daniel, the problem is the #text_field on the link. After setting the focus, Firefox is wanting to jump to that named location in the document. All you need to do is return false from your click handler.

$(field_id).focus();
return false;