使用 JavaScript 设置“自动对焦”属性不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16794394/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Setting 'autofocus' attribute with JavaScript not working
提问by Halcyon991
I am writing a small plugin, and the plugin will encapsulate an autofocus setting, but when I add the attribute dynamically with JavaScript, it doesn't autofocus the page, which is weird. Is there anyway around this?
我正在写一个小插件，插件会封装一个自动对焦设置，但是当我用JavaScript动态添加该属性时，它不会自动对焦页面，这很奇怪。有没有办法解决？
HTML:
HTML：
<input type="text">
JS:
JS：
document.querySelector('input').setAttribute('autofocus', 'autofocus');
Without doing:
不做：
document.querySelector('input').setAttribute('autofocus', 'autofocus').focus();
jSFiddle: http://jsfiddle.net/wPUNN/
jSFiddle：http: //jsfiddle.net/wPUNN/
回答by Jordan Robert Dobson
The best approach seems to be this:
最好的方法似乎是这样的：
document.querySelector('input').autofocus = true;
This post might help explain why to use a reflected property: https://stackoverflow.com/a/18770417/3920924
这篇文章可能有助于解释为什么要使用反射属性：https: //stackoverflow.com/a/18770417/3920924
However it seems you need to apply it near the document load. Otherwise it doesn't seem to fire. I think that's because here (http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#autofocusing-a-form-control:-the-autofocus-attribute:the-dialog-element) it's defined to work as soon as the page is loaded. I haven't seen anything else that says it can be called later in time. Every time I've tried to fire it later with like a setTimeout of 3 seconds it never focuses the field.
但是，您似乎需要在文档加载附近应用它。否则它似乎不会火。我认为这是因为这里（http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#autofocusing-a-form-control:-the-autofocus-attribute:the-dialog -element) 它被定义为在页面加载后立即工作。我还没有看到任何其他内容说它可以在以后调用。每次我稍后尝试以 3 秒的 setTimeout 触发它时，它都不会聚焦该领域。
回答by John b
Try something like this
尝试这样的事情
document.querySelector('input').focus()
Edit
编辑
If you want to HTML 5 standard you should make the HTML look something like this
如果你想要 HTML 5 标准，你应该让 HTML 看起来像这样
<input type="text" autofocus>
回答by Chamika Sandamal
Try to add the javascript code soon after the input element, so it will execute before the page load complete. In your case autofocusattribute is set to the element but focusing the element which has autofocusby browser is already done. so you setting the value after browser set the focus. when browser trying to set it no attribute is there. try like following code
尝试在输入元素后立即添加 javascript 代码，以便在页面加载完成之前执行。在您的情况下，autofocus属性设置为元素，但autofocus已经完成了浏览器拥有的元素的聚焦。所以你在浏览器设置焦点后设置值。当浏览器尝试设置它时，没有属性。尝试像下面的代码
<input type="text">
<script>
document.querySelector('input').setAttribute('autofocus', 'autofocus');
</script>
If you need to do it on button click or something, you need to do it in JavaScript. setting an attribute doesn't mean browser is going to execute it at anytime.
如果您需要通过单击按钮或其他方式执行此操作，则需要在 JavaScript 中执行此操作。设置属性并不意味着浏览器会随时执行它。
