jQuery 焦点功能在 Firefox 中不起作用

Question

以下代码段在您单击链接后聚焦文本输入。 它适用于 Chrome 2.x、IE8 和 Opera 9.64，但不适用于 Firefox 3.0.9。 Firefox 中的文本输入快速闪烁然后消失，我目前正在使用 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" />

有谁知道如何在 Firefox 中处理上述问题？

Answer 1

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

我认为 FF 中发生此错误是因为单击链接后，它会运行单击回调，然后打开 page#textfield。 你可以试试：

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

这样就没有链接，也不会打开其他页面。

Answer 3

您还可以更明确地对事件参数调用 preventDefault。

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

});

Answer 4

我不知道这是不是你想要的。 要将焦点放在输入上，请单击 标签，您可以执行以下操作：

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

或者

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

Answer 5

正如丹尼尔所暗示的，问题出在链接上的#text_field。 设置焦点后，Firefox 希望跳转到文档中的指定位置。 您需要做的就是从点击处理程序返回 false。

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

Answer 6

除了其他两个答案之外，您的方法不起作用的原因是因为 href 字段的值通常完全符合 url （这取决于浏览器，并且 jQuery 不会将其抽象出来）。

因此，如果您有一个 href“#text_field”，您可能会发现该字段的实际值是“http://localhost/#text_field ”，这就是它与您的模式不匹配的原因。

如果您想专注于字段，丹尼尔关于标签和“for”属性的建议是一个很好的解决方案。

Answer 7

这应该可以解决问题：

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

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

在最新版本的 Chrome、IE 和 FireFox 中进行了测试。