加载网页时如何自动将焦点设置到文本框？
是否有一个 HTML 标签来做它或者它必须通过 Javascript 来做？
Mark Biek
问问题
376077 次
14 回答
258
如果您使用的是 jquery：
$(function() {
$("#Box1").focus();
});
或原型：
Event.observe(window, 'load', function() {
$("Box1").focus();
});
或纯javascript：
window.onload = function() {
document.getElementById("Box1").focus();
};
尽管请记住，这将替换其他加载处理程序，因此请在 google 中查找 addLoadEvent() 以获得附加加载处理程序而不是替换的安全方法。
于 2008-09-05T13:46:38.410 回答
99
在 HTML 中，所有表单字段都有一个autofocus属性。在Dive Into HTML 5中有一个很好的教程。不幸的是，低于 10 的 IE 版本目前不支持它。
要使用 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 不支持。
于 2010-06-15T08:54:21.590 回答
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 并引用一个函数，将焦点设置到您想要的文本框。
于 2008-09-05T13:35:47.080 回答
16
只需在文本字段中写入自动对焦。这很简单，它的工作原理是这样的：
<input name="abc" autofocus></input>
希望这可以帮助。
于 2017-01-16T11:26:01.753 回答
13
您可以通过这种方式使用 jquery 轻松地做到这一点：
<script type="text/javascript">
$(document).ready(function () {
$("#myTextBoxId").focus();
});
</script>
通过在$(document).ready().
这意味着该函数将在 DOM 准备就绪时执行。
有关 READY 功能的更多信息，请参阅：http ://api.jquery.com/ready/
于 2011-09-01T02:01:38.423 回答
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 的函数名称中删除了下划线字符，因为在代码块中它拒绝正确呈现！我在标记文档中看不到如何获取下划线以呈现非转义。）
希望这可以帮助。
于 2008-09-05T14:05:10.580 回答
7
恕我直言，在页面上选择第一个可见的启用文本字段的“最干净”的方法是使用 jQuery 并执行以下操作：
$(document).ready(function() {
$('input:text[value=""]:visible:enabled:first').focus();
});
希望有帮助...
谢谢...
于 2010-07-23T08:03:46.460 回答
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>
于 2008-09-05T13:39:37.663 回答
5
作为一般建议，我建议不要从地址栏中窃取焦点。（杰夫已经谈过了。）
加载网页可能需要一些时间，这意味着您的焦点更改可能会在用户键入 pae URL 后的一段时间内发生。然后他可能会改变主意，在您加载页面并窃取焦点将其放入文本框中时重新输入 url。
这是让我删除 Google 作为我的起始页面的唯一原因。
当然，如果你控制网络（本地网络），或者如果重点改变是为了解决一个重要的可用性问题，那就忘了我刚才说的吧:)
于 2008-09-06T13:53:23.517 回答
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);
于 2016-12-01T21:05:22.347 回答
2
可以autofocus在输入元素上设置
<input type="text" class="b_calle" id="b_calle" placeholder="Buscar por nombre de calle" autofocus="autofocus">
于 2019-10-08T12:15:41.807 回答
0
从上面的 Dave1010 调整了我的答案，因为 JavaScript 备份对我不起作用。
<input type="text" id="my-input" />
和 Javascipt 备份检查：
if (!(document.getElementById("my-input").hasAttribute("autofocus"))) {
document.getElementById("my-input").focus();
}
于 2022-01-06T14:14:16.760 回答
-1
如果您使用的是 ASP.NET，那么您可以使用
yourControlName.Focus()
在服务器上的代码中，这会将适当的 JavaScript 添加到页面中。
其他服务器端框架可能有等效的方法。
于 2016-12-01T21:15:55.183 回答
-3
使用下面的代码。对我来说它正在工作
jQuery("[id$='hfSpecialty_ids']").focus()
于 2012-10-10T14:32:16.930 回答