如何在 Internet Explorer 中进行输入自动对焦？答案

【问题标题】：How to make input autofocus in internet explorer?如何在 Internet Explorer 中进行输入自动对焦？
【发布时间】：2012-01-07 00:50:47
【问题描述】：

请查看我的 JSFiddle

https://jsfiddle.net/WK2N3/1/

#searchbar {
float: left;
display: inline;
background: #FFFFFF;
height: 29px;
width: 660px;
border: 1px solid #bdbdbd;
margin: 55px 0px 0px 10px;
font-size : 17px;
font-family : Georgia;
font : 17px Georgia, Times, âTimes New Romanâ, serif;
color : #333333;
}

#searchbar:focus {
float: left;
display: inline;
background: #FFFFFF;
height: 29px;
width: 660px;
border: 1px solid #2e9afe;
margin: 55px 0px 0px 10px;
font-size : 17px;
font-family : Georgia;
font : 17px Georgia, Times, âTimes New Romanâ, serif;
color : #333333;
-moz-box-shadow: 0 0 2px #2e9afe;
-webkit-box-shadow: 0 0 2px#2e9afe;
box-shadow: 0 0 2px #2e9afe;
}

input:focus {
outline : none;
}

&lt;form&gt;&lt;input type="text" id="searchbar" autofocus="autofocus"/&gt;&lt;/form&gt;

我怎样才能在自动对焦上像 chrome、safari、opera 和 firefox for IE 一样进行此操作？

【问题讨论】：

标签： html css cross-browser

【解决方案1】：

您将不得不依赖 javascript 来执行此操作，因为 IE 不支持 html5 自动对焦。这里有一篇很好的博客文章：https://www.html5tutorial.info/html5-autofocus.php

基本上，您首先检查该属性是否受支持，如果不支持，则使用 javascript 使用 focus() 方法手动关注所述输入。

【讨论】：

截至今天，2016 年 12 月 13 日，autofocus 关键字在 Windows 10 上的 IE 11.0.36 中有效，但在 Windows 7 上的 IE 11.0.35 中无效。非常烦人。

【解决方案2】：

IE中的自动对焦只是

<input type="text" id="searchbar" autofocus />

不是

<input type="text" id="searchbar" autofocus="autofocus"/>

请参阅http://msdn.microsoft.com/en-us/library/windows/apps/hh441087(v=vs.85).aspx 了解更多信息。

【讨论】：

你错了。这两种语法都适用于所有支持autofocus 的浏览器。但是，Internet Explorer 仅从版本 10 开始支持它。

【解决方案3】：

我通常使用 jQuery：

$('input').focus()

现场示例：https://jsfiddle.net/simply_simpy/eb4JJ/5/

【讨论】：

【解决方案4】：

这是一个使用 jQuery 使自动对焦在 IE 中工作的单行代码（嗯，实际逻辑的一行）。如果焦点已经设置，它就会退出——换句话说，在任何支持 HTML5 的浏览器中。

$(function() {
  $('[autofocus]:not(:focus)').eq(0).focus();
});

我解释了它是如何工作的 in my blog。而here 是更新后的 jsFiddle，可以在 IE 中运行。

【讨论】：

如果有（错误地）两个元素带有autofocus属性怎么办？在兼容的浏览器中，这段代码不会找到第二个（未聚焦的）元素并将焦点设置在那里吗？
不，@xec，这就是.eq(0) 的用途。此外，如果有两个autofocus 元素，那么这就是页面中的一个错误，哪一个获得焦点并不重要，对吧？
.eq(0) 在 :not(:focus) 选择器运行之后被调用，所以这没有什么区别。我同意这不是一个大问题，它只是 html 无效时的一个错误。无论如何，我相信$('[autofocus]').focus() 应该足够了。
jsFiddle 不支持 IE。这……不方便。
很抱歉。我写原始答案时，jsFiddle支持IE。

【解决方案5】：

你可以试试这个。

setTimeout(function() { document.getElementById('myInput').focus(); }, 10);

更多详情AutoFOcusIE

【讨论】：