加载网页时如何自动将焦点设置到文本框？答案

【问题标题】：How do you automatically set the focus to a textbox when a web page loads?加载网页时如何自动将焦点设置到文本框？
【发布时间】：2008-09-05 13:33:44
【问题描述】：

如何在网页加载时自动将焦点设置到文本框？

是否有一个 HTML 标记来完成，还是必须通过 Javascript 完成？

【问题讨论】：

blog.jerodsanto.net/2009/05/jquery-set-mouse-focus-on-page-load

标签： javascript html

【解决方案1】：

如果您使用的是 jquery：

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

或原型：

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

或纯javascript：

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

尽管请记住，这将替换其他加载处理程序，因此请在 google 中查找 addLoadEvent() 以获取附加加载处理程序而不是替换的安全方法。

【讨论】：

为什么不将处理程序放在 body 元素上？有什么参考吗？谢谢
因为将 javascript 与 HTML 分开会更干净。您应该将脚本行为添加到 HTML 中的可视元素。

【解决方案2】：

在 HTML 中，所有表单字段都有一个 autofocus attribute。 Dive Into HTML 5 有一个很好的教程。不幸的是，在 IE 版本小于 10 的情况下，它目前不是 supported。

要使用 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 不支持。

【讨论】：

autofocus="aufofocus" 是怎么回事？您提供的所有链接都只是说要添加属性：autofocus。
在 XHTML 和 HTML4 时代，为布尔属性使用 attribute="value" 是很常见的。 HTML5 出现了“空属性语法”，我们删除了冗余。现在我们可以做<input checked disabled autofocus data-something>
我喜欢这种方法...该代码属于输入...摆脱输入和繁荣，相关的代码就在那里...这些天我们迷路了...现在正试图简化……

【解决方案3】：

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

【讨论】：

【解决方案4】：

只需在文本字段中编写自动对焦即可。这很简单，它的工作原理是这样的：

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

希望这会有所帮助。

【讨论】：

这很好，但问题是，如果您有滑动样式的步骤，那么如果输入类型在第 3 步或第 4 步上，那将无用

【解决方案5】：

您可以通过这种方式使用 jquery 轻松完成：

<script type="text/javascript">

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

</script>

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

表示这个函数会在 DOM 准备好时执行。

有关READY功能的更多信息，请参考：http://api.jquery.com/ready/

【讨论】：

【解决方案6】：

使用普通的 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 的函数名称中删除了下划线字符，因为在代码块中它拒绝正确呈现！我在标记文档中看不到如何获取下划线以不转义呈现。）

希望这会有所帮助。

【讨论】：

【解决方案7】：

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

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

希望对您有所帮助...

谢谢...

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

作为一般建议，我建议不要从地址栏中窃取焦点。 (Jeff already talked about that.)

加载网页可能需要一些时间，这意味着您的焦点更改可能会在用户键入 pae URL 后的一段时间内发生。然后他可能会改变主意并在您加载页面并窃取焦点将其放入文本框中时重新输入 url。

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

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

【讨论】：

在某些情况下我同意你的看法。但是，在我的具体情况下，我弹出了一个只有一个输入框的小 div。用户应该输入一些内容并立即关闭 div，因此设置焦点很方便。

【解决方案10】：

我遇到了一个稍微不同的问题。我想要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);

https://jsfiddle.net/b9chris/qLrrb93w/

【讨论】：

【解决方案11】：

可以在输入元素上设置autofocus

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

【讨论】：

【解决方案12】：

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

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

还有 Javascipt 备份检查：

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

【讨论】：

【解决方案13】：

如果您使用的是 ASP.NET，那么您可以使用

yourControlName.Focus()

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

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

【讨论】：

【解决方案14】：

使用下面的代码。对我来说它正在工作

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

【讨论】：