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 flashes quickly in Firefox then disappears, I'm currently working on Windows XP SP2.

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

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

Does anyone know how to handle the above in Firefox?

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

I think this error in FF is occurring because after you click the link it runs the click callback and after that it opens the page#textfield. You can try:

$(document).ready(function()
{
    $("div").click(function() {
        var field_id = $(this).attr("forInput");
        $(field_id).focus();
    });
});
</script>

<div forInput="#text_field">Focus</div>
<input type="text" name="text_field" id="text_field" />

This way there is no link and will not open another page.

Answer 3

<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 4

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 5

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;

Answer 6

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.