如何在网页加载时自动将焦点设置到文本框？
是否有HTML标签可以实现此功能，还是必须通过JavaScript来完成？
当网页加载时如何自动将焦点设置到文本框？
175
- Mark Biek
1
http://blog.jerodsanto.net/2009/05/jquery-set-mouse-focus-on-page-load/ - Arjun
14个回答
263
如果你正在使用jQuery：
$(function() {
$("#Box1").focus();
});
或原型：
Event.observe(window, 'load', function() {
$("Box1").focus();
});
或普通的 JavaScript：
window.onload = function() {
document.getElementById("Box1").focus();
};
请注意，这将替换其他的onload处理程序，因此请在谷歌上查找addLoadEvent()以获取安全的方法来附加onload处理程序，而不是替换它们。
- Ben Scheirman
2
3为什么不在 body 元素上添加处理程序？有参考资料吗？谢谢。 - Alexander Torstling
7将JavaScript与HTML分离，可以让代码更加清晰。你应该在HTML元素中添加脚本行为。 - Ben Scheirman
100
在HTML中，所有表单字段都可以使用 autofocus 属性。在 Dive Into HTML 5 中有一个很好的教程。不幸的是，IE版本低于10的浏览器目前不支持该属性，请参考此处。
要使用HTML 5属性并回退到JS选项：
<input id="my-input" autofocus="autofocus" />
<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("my-input").focus();
}
</script>
不需要jQuery、onload或事件处理程序，因为JS在HTML元素下方。
编辑：另一个优点是它可以在某些浏览器中关闭JavaScript并且当您不想支持旧浏览器时，可以删除JavaScript。
编辑2：Firefox 4现在支持autofocus属性，只有IE不支持。
- dave1010
3
3“autofocus='autofocus'”是什么意思？你提供的所有链接都只是建议添加属性：“autofocus”。 - Gerrat
7在 XHTML 和 HTML4 时代，使用
attribute="value" 的形式来表示布尔属性十分普遍。随着 HTML5 的出现，我们采用了“空属性语法”，这样就不再需要冗余的代码了。现在，我们可以这样写：<input checked disabled autofocus data-something>。 - dave1010我喜欢这种方法...那段代码与输入相关...去掉输入，嘭，相关的代码就在那里...我们现在变得如此迷失...现在又回到了起点，试图简化... - Serge
17
你需要使用JavaScript：
<BODY onLoad="document.getElementById('myButton').focus();">
@Ben指出你不应该这样添加事件处理程序。虽然这是另一个问题，但他建议你使用这个函数：
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
然后在您的页面上调用addLoadEvent，并引用一个将焦点设置到所需文本框的函数。
- Espo
16
只需在文本框中写入autofocus即可。这很简单，它的作用如下：
<input name="abc" autofocus></input>
希望这能够有所帮助。
- Arjun
1
1这很好，但问题是，如果您有滑动样式的步骤，那将不会很有用，特别是如果输入类型在第3步或第4步。 - Kobe Bryan
13
你可以通过以下方式轻松使用 jQuery 来实现：
<script type="text/javascript">
$(document).ready(function () {
$("#myTextBoxId").focus();
});
</script>
调用$(document).ready()函数，意味着该函数会在DOM准备就绪时执行。
要了解有关READY函数的更多信息，请参阅：http://api.jquery.com/ready/
- Amir Chatrbahr
12
使用纯粹的HTML和JavaScript
<input type='text' id='txtMyInputBox' />
<script language='javascript' type='text/javascript'>
function SetFocus()
{
// safety check, make sure its a post 1999 browser
if (!document.getElementById)
{
return;
}
var txtMyInputBoxElement = document.getElementById("txtMyInputBox");
if (txtMyInputBoxElement != null)
{
txtMyInputBoxElement.focus();
}
}
SetFocus();
</script>
对于那些使用 .net 框架和 asp.net 2.0 或更高版本的人来说，这是微不足道的。如果您正在使用较旧版本的框架，则需要编写类似上面的一些 JavaScript。
在您的 OnLoad 处理程序中（通常是 page_load，如果您正在使用 visual studio 提供的标准页面模板），您可以使用：
C#
protected void PageLoad(object sender, EventArgs e)
{
Page.SetFocus(txtMyInputBox);
}
VB.NET
Protected Sub PageLoad(sender as Object, e as EventArgs)
Page.SetFocus(txtMyInputBox)
End Sub
(*注意：我从函数名中删除了下划线字符，一般情况下该函数名为Page_Load，因为在代码块中它拒绝正确显示！我无法在标记文档中找到如何获得未转义的下划线的方法。)
希望这可以帮助你。
- Jon
7
在我的看法中，选择页面上第一个可见的启用状态文本字段的“最干净”的方法是使用jQuery，并执行以下操作：
$(document).ready(function() {
$('input:text[value=""]:visible:enabled:first').focus();
});
希望这能帮到您...
谢谢...
- revive
6
<html>
<head>
<script language="javascript" type="text/javascript">
function SetFocus(InputID)
{
document.getElementById(InputID).focus();
}
</script>
</head>
<body onload="SetFocus('Box2')">
<input id="Box1" size="30" /><br/>
<input id="Box2" size="30" />
</body>
</html>
- Joel Coehoorn
5
作为一般建议，我建议不要从地址栏中夺取焦点。(Jeff已经谈论过这个问题。)
网页加载需要一些时间，这意味着您的焦点变化可能会在用户输入页面URL后的一段时间内发生。然后他可能已经改变了主意，回到了URL输入，而您将加载您的页面并窃取焦点放入您的文本框。
这就是唯一的原因，让我把Google从我的起始页中删除。
当然，如果您控制网络(本地网络)或者焦点变化是为了解决重要的可用性问题，请忘记我刚才说的一切 :)
网页加载需要一些时间，这意味着您的焦点变化可能会在用户输入页面URL后的一段时间内发生。然后他可能已经改变了主意，回到了URL输入，而您将加载您的页面并窃取焦点放入您的文本框。
这就是唯一的原因，让我把Google从我的起始页中删除。
当然，如果您控制网络(本地网络)或者焦点变化是为了解决重要的可用性问题，请忘记我刚才说的一切 :)
- Vincent Robert
1
在某些情况下，我同意你的看法。然而，在我的具体情况中，我弹出了一个只有一个输入框的小div。用户应该输入一些内容并立即关闭div，因此设置焦点很方便。 - Mark Biek
2
我有一个略微不同的问题。 我想要使用
autofocus，但是希望在不同浏览器下保持 placeholder 文本的显示。一些浏览器会在输入框获得焦点时隐藏 placeholder 文本，而另一些则会保留它。我必须要么让占位符跨浏览器保持显示，这样会导致奇怪的副作用，要么停止使用 autofocus。
因此，我监听了对 body 标签的首次按键，然后将该按键重定向到目标输入框。然后将涉及的所有事件处理程序关闭以保持代码的整洁。
var urlInput = $('#Url');
function bodyFirstKey(ev) {
$('body').off('keydown', bodyFirstKey);
urlInput.off('focus', urlInputFirstFocus);
if (ev.target == document.body) {
urlInput.focus();
if (!ev.ctrlKey && !ev.metaKey && !ev.altKey) {
urlInput.val(ev.key);
return false;
}
}
};
function urlInputFirstFocus() {
$('body').off('keydown', bodyFirstKey);
urlInput.off('focus', urlInputFirstFocus);
};
$('body').keydown(bodyFirstKey);
urlInput.focus(urlInputFirstFocus);
- Chris Moschini
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接