javascript - 为什么将输入集中在页面加载而不是内联？

Question

我看到的几乎所有旨在将焦点设置到输入框的网页都将代码添加到正文 onload 事件中。这会导致代码在整个 html 文档加载后执行。从理论上讲，这似乎是一种很好的做法。

但是，根据我的经验，这通常会导致用户的双重工作，因为他们已经在两个或三个字段中输入了数据，并且当他们的光标在他们不知情的情况下跳回时正在输入另一个字段。我见过数量惊人的用户将密码的最后 2/3 输入到用户名字段的开头。因此，我总是在输入之后立即放置 JS 焦点代码，以确保没有延迟。

我的问题是：是否有任何技术原因不将此焦点代码内联？在页面末尾或 onload 事件中调用它是否有优势？考虑到明显的实际缺点，我很好奇为什么它已成为普遍做法。

score 1 · Accepted Answer

几个想法：

我会使用像 jQuery 这样的框架并让这种类型的代码在$(document).ready(.... window.onload 直到页面上的所有内容都完全加载后才会运行，这解释了您所经历的延迟。$(document).ready(...当 jQuery 确定DOM 已加载时运行。你可能不用 jQuery 也能写出同样的逻辑，但它会因浏览器而异。
我更喜欢将我的 Javascript 与我的 HTML 分开，因为它可以更清晰地分离关注点。然后，您的行为将与您的文档结构分开，该文档结构与您在 CSS 中的演示文稿分开。这还允许您更轻松地重用逻辑并维护该代码 - 可能跨项目。

score 0 · Accepted Answer

出于性能原因，Google 和 Yahoo 都建议将脚本放在 html 页面的底部。

如果它意味着正确的用户体验，您绝对应该将脚本放置在适当的位置 - 事实上，我会在输入之前加载脚本的那部分（用于选项卡输入），以确保无论连接速度有多慢它都始终有效。

“document.ready”功能允许您确保要引用的元素在 dom 中，并在加载整个文档 dom 时立即触发（这并不意味着图像已完全加载）。

如果您愿意，您可以让输入以禁用状态开始，然后在准备好文档时重新启用它们。这将处理在显示输入时脚本尚未准备好的罕见情况。

score 0 · Accepted Answer

好吧，如果您在整个页面加载之前调用它，您真的不知道在您调用时元素是否已经加载。如果你事先打电话，你应该检查元素是否真的存在，即使你知道它总是应该存在的。

然后进行内联调用，这似乎很理想。但另一方面，如果页面需要很长时间才能加载，您可以在加载阶段进行多次输入，那就太糟糕了。

您还可以检查是否已进行输入等。

score 0 · Accepted Answer

还可以检查页面上的任何输入是否包含焦点if($("input::focus, textarea::focus").length)...，否则将焦点设置在所需的输入上。

score 0 · Accepted Answer

使用autofocusHTML 属性指定最初应该获得焦点的元素。这将 JavaScript 解耦并在旧浏览器中优雅地降级。

5 回答 5