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

Question

当页面加载时，我想使用JQuery将焦点集中在第一个元素上。通过使用以下代码，我可以成功地将焦点设置为第一个元素：$(document).ready(function() { $('input:first').focus(); });

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

或者

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

根据jQuery设置页面上第一个启用的输入框、选择框或文本区域的焦点。

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

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

我尝试过其他变体，但都没有成功。

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

我希望这个函数能在所有主流浏览器上运行。

非常感谢！

- user605660

---

你能发布一些相关的HTML代码吗？也许是格式问题？你在多个浏览器中测试过吗？ - user241244

另外，$(":visible:first") 将尝试聚焦于第一个可见的元素。这可能不是你想要做的事情。同样，“enabled” 不是 HTML 元素，因此 $("enabled:visible:first") 不会指向任何东西。继续努力，一切都会变得更好。 - user241244

Answer 1

问题很可能是您没有在DOM加载后运行代码。尝试使用以下代码：

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

这应该可以工作。

编辑：你可以通过使用以下代码简化它：

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

如果您这样使用，jQuery会在文档的DOM准备就绪时触发该函数。

- David Conde

---

在执行自己的Javascript代码之前，请确保你已经引入了jQuery库。 - Logan Bailey

抱歉，我以为你已经包含了jQuery。另外，建议使用Firefox和Firebug，会让你的生活更轻松。 - David Conde

感谢David和Logan的快速回复。但是它们并不能解决我的问题。我的代码包含在$(document).ready(function(){ })中。抱歉，我没有解释清楚。此外，我已经将jquery库包含在<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>中。所有这些代码都存在于body部分。由于:input:first可以工作，所以我想这应该是与select相关的问题。我在Qualtrics中使用此代码，这是一个类似于SurveyMonkey的在线调查工具。也许这是与该工具有关的问题。 - user605660

嗨。是的，你的代码是正确的。问题似乎来自我的代码的其他部分。当我清理了大部分的代码并只关注这个函数时，它很好地工作了。非常感谢你的帮助！！ - user605660

Answer 2

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

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

更新：

根据 @David 的回答和评论，他是正确的。

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

但是你没有正确地包含 jQuery（如注释所示）。你忘记在 src 前插入 http。

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

- Adeel

---

谢谢你的回复，Adeel。但是正如我上面提到的，这并没有解决我的问题。 - user605660