jQuery focus function not working in Firefox

问题:

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?

回答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>

回答2:

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;

回答3:

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.

回答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.

回答5:

<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" />

回答6:

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.

回答7:

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();
    });

});