在输入字段中使用“自动对焦”时，Firefox 中无样式内容 (FOUC) 的闪烁答案

【问题标题】：Flash of unstyled content (FOUC) in Firefox when using 'autofocus' in input field在输入字段中使用“自动对焦”时，Firefox 中无样式内容 (FOUC) 的闪烁
【发布时间】：2017-04-29 22:30:37
【问题描述】：

实际上，这更像是一个错误描述而不是一个问题。

我注意到 Firefox 在一个非常简单的登录页面上出现了无样式内容 (FOUC)。没有使用图像。没有繁重的 CSS。所有 Javascript 都放在代码的末尾，就在结束 body 标记之前。但是当页面加载时，Firefox 显示一个完全没有样式的页面大约 100 毫秒，然后 css 生效。这种情况每次都会发生，无一例外。

我偶然发现了某种破解方法来解决这个问题：只需在<head> 中添加一个<script> 元素，在其中放置您喜欢的任何javascript 代码，甚至是一个简单的注释，然后-bam！ - 问题解决了。像这样：

<script>/* foo */</script>

FOUC 的实际原因似乎是在表单字段之一中使用了 autofocus 属性。所以去掉“自动对焦”也能解决问题。

~~这不是很奇怪吗？~~ 有谁知道比我更好的解决方案？

【问题讨论】：

我猜这是stackoverflow.com/questions/18943276/…的副本

标签： html forms autofocus fouc

【解决方案1】：

我可以在 Firefox v.53 中确认这种行为，通过消除我也追踪到文本输入上的“自动对焦”属性。

您可以通过在 Javascript 中设置焦点来移除 FOUC，例如：

document.getElementsByClassName('form-field')[0].focus();

或者使用 jQuery：

$('.form-field').focus();

【讨论】：

非常感谢！这让我发疯了！
从技术上讲，TypeError: document.getElementsByClassName(...).focus is not a function，但想法很明确 :)
我总是在脚本末尾加载我的 jquery，所以这会起作用吗，还是仅适用于开头加载的 jquery？到目前为止，我正在使用
@ThomasWilliams - 不确定我是否关注你...尝试在 DOM-ready 块中执行你的 jQuery 代码，例如 $(function () { ... code... });确保您有对表单元素的引用，并确保它在 jQuery 库加载后执行，这样您就不会收到引用错误。如果您在或之前调用 jQuery 库，获得焦点的表单元素应该可以工作，但如果您将 jQuery 代码内联放置在不在 DOM 中的 HTML 中，后者将导致引用错误-就绪块。
您好 Nick，感谢您的回复，但 Firefox 中的一个错误导致了我的问题。当 Firefox 奇怪地更新时，它就消失了。