当网页加载时，你如何自动将焦点设置为文本框？

当网页加载时，你如何自动将焦点设置为文本框？

有没有一个 HTML 标记来做这件事，还是必须通过 Javascript 来做？

382030 次浏览
小开

你需要使用 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 并引用一个函数，该函数将焦点设置为所需的文本框。

小开 
<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>
小开
最佳答案

如果你使用 jquery:

$(function() {
$("#Box1").focus();
});

或原型:

Event.observe(window, 'load', function() {
$("Box1").focus();
});

或简单的 javascript:

window.onload = function() {
document.getElementById("Box1").focus();
};

但是请记住，这将替换其他 onload 处理程序，所以在 google 中查找 addLoadEvent () ，找到一种安全的方法来附加 onload 处理程序，而不是替换。

小开

使用普通的 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 处理程序中(如果使用 Visual Studio 提供的库存页面模板，通常是 page _ load) ，您可以使用:

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 的函数名中删除了下划线字符，因为在代码块中它拒绝正确呈现！我无法在标记文档中看到如何获得下划线以呈现未转义的内容。)

希望这个能帮上忙。

小开

作为一般性的建议，我建议不要从地址栏窃取焦点

加载网页可能需要一些时间，这意味着在用户键入 pae URL 之后很长时间才会发生焦点更改。然后，他可能已经改变主意，回到网址键入，而你将加载你的网页，窃取焦点，把它放在你的文本框。

这是唯一的原因，让我删除谷歌作为我的起始页。

当然，如果你控制网络(本地网络) ，或者如果焦点的改变是为了解决一个重要的可用性问题，忘记我刚才说的一切:)

小开

在 HTML 中，所有表单字段都有一个 autofocus属性。在 进入 HTML 5中有一个很好的关于它的教程。不幸的是，它目前不是 支持的 IE 版本小于10。

使用 HTML5属性并回退到 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。

小开

恕我直言，选择页面上第一个可见的启用文本字段的“最干净”方法是使用 jQuery 并执行以下操作:

$(document).ready(function() {
$('input:text[value=""]:visible:enabled:first').focus();
});

希望能帮上忙。

谢谢..。

小开

您可以通过以下方式轻松地使用 jquery:

<script type="text/javascript">


$(document).ready(function () {
$("#myTextBoxId").focus();
});


</script>

通过在 $(document).ready()中调用这个函数。

这意味着这个函数将在 DOM 就绪时执行。

有关 READY 函数的详细信息，请参阅: http://api.jquery.com/ready/

小开

使用下面的代码。对我来说，它是工作

jQuery("[id$='hfSpecialty_ids']").focus()
小开

我遇到了一个稍微不同的问题。我想要 autofocus，但是，想要 placeholder文本保留，跨浏览器。一些浏览器会在字段聚焦后立即隐藏 placeholder文本，一些浏览器会保留它。我要么让占位符保持跨浏览器，这有奇怪的副作用，或停止使用 autofocus。

因此，我监听对主体标记输入的第一个键，并将该键重定向到目标输入字段。然后所有涉及的事件处理程序都被杀死，以保持事情的干净。

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

Https://jsfiddle.net/b9chris/qlrrb93w/

小开

如果您正在使用 ASP.NET，那么您可以使用

yourControlName.Focus()

在服务器上的代码中，这将在页面中添加适当的 JavaScript。

其他服务器端框架可能具有等效的方法。

小开

只需在文本字段中编写自动对焦。这很简单，工作原理如下:

 <input name="abc" autofocus></input>

希望这个能帮上忙。

小开

可以在输入元素上设置 autofocus

<input type="text" class="b_calle" id="b_calle" placeholder="Buscar por nombre de calle" autofocus="autofocus">
小开

在上面 Dave1010中调整了我的答案，因为 JavaScript 备份对我不起作用。

<input type="text" id="my-input" />

还有 Javascipt 备份检查:

if (!(document.getElementById("my-input").hasAttribute("autofocus"))) {
document.getElementById("my-input").focus();
}

提交答案