可以在HTML中的元素声明之后使用element.focus（）吗？

Question

我想制作一个表格，我想自动将焦点放在一个字段上。 在过去，我学会了总是等待任何DOM操作，直到window.onload被触发，因为DOM可能没有准备好。 自JQuery以来，DOMContentReady事件已经变得很有名，它在（比较兼容的浏览器中）比window.onload更早出现。

这仍然会在显示字段和获得焦点的那一刻之间产生延迟（通过在window.onload中使用document.getElementById（“inputfield”）。focus（）或在触发DOMContentReady之后）。 为了最大限度地减少延迟，有些人建议在页面中的元素后直接使用focus（），例如：

<form name="f">
  <input id="q" autofocus>
  <script>
    if (!("autofocus" in document.createElement("input"))) {
      document.getElementById("q").focus();
    }
  </script>
  <input type="submit" value="Go">
</form>

（来自潜入HTML5的示例）

此外，Google Closure团队建议采用这种做法：“ 首选方法是尽快使用内联脚本 ”，就像SO状态的另一个答案一样。

我不想辩论这是不是坏习惯（一般来说，我同意内容和行为应该分开的观点，最好是在单独的文件中）。 我的问题是： 这可能有害吗？ 例如，在某些浏览器中导致错误消息，因为该字段可能仍未正确呈现（并且不要忘记移动浏览器）。 任何建议表示赞赏。

Answer 1

不，它没有害处，它是（主观）最好的方式。

它是最好的原因：

• 代码尽快成功执行（而不是等待整个DOM，它等到达到某个元素）
• 不依赖于DOM事件（尚未标准化）

它很糟糕的原因：

• 缺乏行为分离
• 难以维护，因为代码将遍布各处
• 由于存在多个<script>标记，因此整体页面大小增加

Answer 2

说实话，我曾经想过如果你看到页面弹出和获得焦点的元素之间有延迟，那么这确实表明你的页面可能太大，所以减少这将是你的第一个端口呼叫。 我知道如果我看到这样的内联代码，我会非常不高兴。 正如约什所说，这将成为可维护性的噩梦。

但是，关于它有害的问题，我认为如果浏览器已处理脚本节点以运行javascript，那么它也将处理输入节点，因此它应该可用于代码。 因此，我不希望出现错误。