我看到的几乎所有用于将焦点设置为输入框的网页都将代码添加到body onload事件中。这会导致代码在整个html文档加载后执行。从理论上讲，这似乎是一种很好的做法。
然而，根据我的经验，这通常会导致用户双重工作，因为他们已经将数据输入到两个或三个字段中，并且在他们的光标被他们不知情的情况下跳回来时正在输入另一个字段。我看到有惊人数量的用户在用户名字段的开头键入最后2/3的密码。因此，我总是在输入后立即放置JS焦点代码，以确保没有延迟。
我的问题是：是否有任何技术原因不将此焦点代码置于内联？在页面末尾或onload事件中调用它有什么好处吗？我很好奇为什么考虑到明显的实际缺点，它已经成为惯例。
答案 0 :(得分：1)
一些想法：
我会使用类似jQuery的框架，并在$(document).ready(...上运行此类代码。 window.onload不运行，直到页面上的所有内容都已完全加载，这解释了您遇到的延迟。当{jQuery确定 DOM已加载时，$(document).ready(...运行。你可以在没有jQuery的情况下编写相同类型的逻辑，但它因浏览器而异。
我更喜欢将我的Javascript与HTML分开，因为它可以更清晰地分离关注点。然后，您的行为将与您的文档结构分开，该文档结构与您在CSS中的演示文稿分开。这也使您可以更轻松地重用逻辑并维护该代码 - 可能跨项目。
答案 1 :(得分：0)
谷歌和雅虎都建议出于性能原因将脚本放在html页面的底部。
雅虎文章：http://developer.yahoo.com/performance/rules.html#js_bottom
如果它意味着正确的用户体验，你肯定应该将脚本放在适当的位置 - 实际上我会在输入之前加载脚本的那部分（用于标签输入），以确保它始终有效，无论多慢连接。
“document.ready”功能允许您确保要加载的元素在dom中并在加载整个文档dom时触发（这并不意味着图像已完全加载）。
如果您需要，您可以将输入作为禁用开始，然后在文档就绪时重新启用它们。这将处理在显示输入时脚本尚未就绪的罕见情况。
答案 2 :(得分：0)
好吧，如果你在整个页面加载之前调用它，你真的不知道你打电话时元素是否已被加载。如果你事先打电话，你应该检查元素是否真的存在，即使你知道它应该存在。
然后进行内联调用，这似乎是理想的。但另一方面，如果一个页面需要很长时间加载，你可以在加载阶段输入几个输入，这真的很糟糕。
您还可以检查是否已输入等。
答案 3 :(得分：0)
此外，还可以检查页面上的任何输入是否包含焦点if($("input::focus, textarea::focus").length)...，否则将焦点设置为所需的输入。
答案 4 :(得分：0)
使用autofocus HTML属性指定最初应获得焦点的元素。这解耦了JavaScript并在旧浏览器中优雅地降级。