javascript - 使用 JavaScript 设置“自动对焦”属性不起作用

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

尝试在 input 元素之后立即添加 javascript 代码，以便在页面加载完成之前执行。在您的情况下autofocus，属性设置为元素，但autofocus已经完成了对浏览器具有的元素的关注。所以你在浏览器设置焦点后设置值。当浏览器尝试设置它时，没有任何属性。试试下面的代码

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

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

如果您需要在按钮单击或其他操作时执行此操作，则需要在 JavaScript 中执行此操作。设置属性并不意味着浏览器会随时执行它。