如何使用 JQuery 将焦点设置在页面的第一个 <select> 元素上？答案

【问题标题】：How to set the focus on the first <select> element of the page using JQuery?如何使用 JQuery 将焦点设置在页面的第一个 <select> 元素上？
【发布时间】：2011-02-15 06:17:41
【问题描述】：

我想在页面加载时使用 JQuery 将焦点设置在页面的第一个元素上。我可以使用

成功设置第一个元素的焦点

$(":input:visible:first").focus();

或

$(':input:enabled:visible:first').focus();

根据jquery, set focus on the first enabled input or select or textarea on the page.

我尝试使用以下任何一种：

$('select:first').focus();
$("select").first().focus();
$(':visible:first').focus();
$('enabled:visible:first').focus();

或我能想到的其他变体，但没有成功。

谁能帮我解决这个问题？我是 JQuery 的初学者。

我希望此功能适用于所有主流浏览器。

非常感谢！

【问题讨论】：

你能发布一些有问题的 HTML 吗？也许是格式问题...？您是否在多个浏览器中对此进行了测试？
另外，$(":visible:first") 将尝试专注于任何可见的第一件事。可能不是你打算做的。同样 'enabled' 不是 HTML 元素，所以 $("enabled:visible:first") 不会指向任何东西。继续努力，它会走到一起的。

标签： jquery html

【解决方案1】：

问题很可能是在加载 DOM 后您没有运行代码。试试这个：

$(document).ready(function(){
   $("select:first").focus();
});

应该可以的。

编辑：您可以使用以下代码稍微简化一下代码：

$(function(){
  $("select:first").focus();
})

如果你这样使用它，jQuery 会在文档的 DOM 准备好时触发该函数。

【讨论】：

还要确保在执行自己的 javascript 之前包含 jquery 库
对此感到抱歉。我假设你已经包含了 jQuery。此外，尝试将 Firefox 与 Firebug 一起使用，会让您的生活更美好。
感谢 David 和 Logan 的快速回复。但是，它们并没有解决我的问题。我的代码包含在 $(document).ready(function(){ } 中。对不起，我没有解释这一点。我还把 jquery 库包含为
嗨。是的，您的代码是正确的。问题似乎来自我代码的其他部分。当我清理了大部分代码并只关注这个函数时，它运行得很好。非常感谢您的帮助！！

【解决方案2】：

您正在调用DOM 中未加载的元素。将您的代码放在ready 函数中。罢工>

jQuery(document).ready(function() {
    $(":input:visible:first").focus();               
});

更新：

正如@David 回答和 cmets 所见，他是对的。

$(document).ready(function(){
    $("select:first").focus();
});

但您没有正确包含 jquery（如评论中所示）。您错过了在脚本 src 之前插入 http。

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

【讨论】：

感谢Adeel的回复，但这并不能解决我上面提到的问题。