使用JavaScript设置'autofocus'属性不起作用

Question

我正在编写一个小插件，该插件将封装自动对焦设置，但是当我使用JavaScript动态添加属性时，它不会自动对焦页面，这很奇怪。反正有吗？

HTML：

<input type="text">

JS：

document.querySelector('input').setAttribute('autofocus', 'autofocus');

不做：

document.querySelector('input').setAttribute('autofocus', 'autofocus').focus();

jSFiddle：http://jsfiddle.net/wPUNN/

Answer 1

最好的方法似乎是：

document.querySelector('input').autofocus = true;

这篇文章可能有助于解释为什么要使用反射属性：https://stackoverflow.com/a/18770417/3920924

但是，您似乎需要在文档加载附近应用它。否则它似乎没有发射。我认为这是因为这里（http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#autofocusing-a-form-control:-the-autofocus-attribute:the-dialog-element）它被定义为在加载页面后立即工作。我还没有看到其他任何可以及时调用的东西。每次我尝试以3秒的setTimeout尝试发射它时，它从不关注该场。

Answer 2

尝试这样的事情

document.querySelector('input').focus()

修改

如果你想要HTML 5标准，你应该让HTML看起来像这样

<input type="text" autofocus>

http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#autofocusing-a-form-control:-the-autofocus-attribute

Answer 3

尝试在输入元素之后不久添加javascript代码，因此它将在页面加载完成之前执行。在您的情况下，autofocus属性设置为元素，但是已经完成了通过浏览器关注具有autofocus的元素。所以你在浏览器设置焦点后设置值。当浏览器尝试设置它时没有属性。尝试下面的代码

<input type="text">
<script>
    document.querySelector('input').setAttribute('autofocus', 'autofocus');
</script>

http://jsbin.com/yatugaxe/1/

如果你需要点击按钮或其他东西，你需要在JavaScript中进行。设置属性并不意味着浏览器会随时执行它。