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

我不知道你是否想要这个。要关注点击label的输入，您可以执行以下操作：

<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

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

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

Answer 3

除了其他两个答案之外，你的方式不起作用的原因是因为href字段的值通常是用url完全限定的（这取决于浏览器和jQuery不会抽象它）。

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

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

Answer 4

这应该可以解决问题：

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

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

在最新版Chrome，IE和FireFox中测试过。

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

Answer 6

我认为FF中的这个错误正在发生，因为在你点击链接后它会运行点击回调，然后打开页面#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 7

你也可以更明确地在事件arg上调用preventDefault。

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

});

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

7 个答案: