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

【问题标题】：jQuery focus function not working in FirefoxjQuery 焦点功能在 Firefox 中不起作用
【发布时间】：2009-06-09 20:39:15
【问题描述】：

以下代码在您单击链接后重点关注文本输入。它适用于 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 中处理上述问题吗？

【问题讨论】：

标签： jquery jquery-1.3

【解决方案1】：

我不知道这是不是你想要的。要专注于点击label 的输入，您可以这样做：

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

【讨论】：

这样就简单多了，我不需要经过jQuery。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

+1 用于提及 .href 包括 http:// 的内容 - 这个“功能”之前也引起了我的注意，也在 .src 上注意它。

【解决方案4】：

这应该可以解决问题：

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

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

在最新版本的 Chrome、IE 和 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】：

我认为 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" />

这样没有链接，也不会打开另一个页面。

【讨论】：

好点，我完全忘记了链接因素，今天早上我遇到了类似的情况。

【解决方案7】：

您还可以更明确地在事件 arg 上调用 preventDefault。

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

});

【讨论】：