6

作为对“如何在网页加载时自动将焦点设置到文本框？”问题的回答。, Espo建议使用

<body onLoad="document.getElementById('<id>').focus();">

Ben Scheirman 回复（没有进一步解释）：

任何 Javascript 书籍都会告诉你不要像那样在 body 元素上放置处理程序

为什么这会被认为是不好的做法？在 Espos 的回答中，说明了一个“覆盖”问题。这是唯一的原因，还是有其他问题？兼容性问题？

4

8 回答 8

8

onLoad由于无法使用此方法堆叠回调，因此使用变得越来越少，即新onload定义覆盖旧定义。

在 jQuery 及其 jQuery 等现代框架.load()中，回调可以堆叠，并且在同一页面上使用不同的脚本、插件等时不会发生冲突。

此外，将标记与代码分开是一种被广泛认为的良好做法，因此即使有人想使用onload（如果您控制完整的环境并知道自己在做什么，这完全可以），也可以将该事件附加到脚本端在head或单独的 javaScript 文件中：

window.onload = function() { document.getElementById...... }
于 2010-04-28T11:23:44.530 回答
4

在元素中使用onload属性没有任何问题，前提是：<body>

  • 您可以完全控制页面
  • 您当前在页面上使用或将来可能拥有的任何其他脚本都不会尝试onload在 body 元素或window对象上设置处理程序
  • 您了解自己的想法，并且很高兴在您的标记中有一小段脚本。

还值得注意的是，它<body onload="...">是正式标准 (HTML 4) 的一部分window.onload，但不是，尽管它已在多年前的所有主要浏览器中实现。

于 2010-04-28T11:47:24.330 回答
3

暂时不考虑内联事件处理程序属性是否错误的问题，该onload事件不适合放置自动对焦器，因为它仅在加载整个页面时触发，包括图像。

这意味着用户将不得不等待更长的时间才能发生自动对焦，并且如果页面需要很长时间才能加载，他们可能已经将注意力集中在浏览器页面（或 chrome，例如地址栏）上的其他位置，只是为了找到他们的打字中途被偷的焦点。这是非常令人恼火的。

自动对焦是一个潜在的敌对功能，应该谨慎而礼貌地使用。其中一部分是减少聚焦前的延迟，最简单的方法是直接在元素本身之后的脚本块。

<input id="x">
<script type="text/javascript">
    document.getElementById('x').focus();
</script>
于 2010-04-28T12:02:51.620 回答
0

我想这也与其他 javascript 文件有关。如果您的某些 javascript 文件包含用于正文加载的处理程序，并且如果您在页面中提供内联正文加载处理程序，则脚本内的处理程序将不会被执行。

于 2010-04-28T11:21:50.117 回答
0

好吧，'<id>'如果你问我，这是一个无效的 id 值。我不会使用任何这样的字符。

为了获得良好的实践，最好使用 window.onload IMO 并将其放在<head>标签中。或者更好的是，您可以将其移动到 .js 文件并缓存它以提高速度。

于 2010-04-28T11:25:18.397 回答
0

作为一个更非javascript相关的答案，您的应用程序的表示层可以是模板的形式，甚至可以是嵌套模板（dreamweaver 或 Master Pages 等），其中可能不需要在 body 标记中包含特定代码或与其他代码冲突当模板被“继承”时需要

于 2010-04-28T11:26:00.687 回答
0

除了可能的稍后覆盖之外，我看不出其他原因，这将导致您的代码永远不会被执行。此外，突兀的 javascript 不再受到高度重视。

您应该分配一个监听事件的函数。你可以这样做：

function onloadFocus() {
    document.getElementById('<id>').focus();
}

if (window.addEventListener) {      
    window.addEventListener('load', function(e) {onloadFocus();}, false);} 
else if (window.attachEvent) {
    window.attachEvent('onload', function(e) {onloadFocus();}); 
}

...或依赖一个 javascript 框架，例如 jquery，它会为您提供相同的功能。

于 2010-04-28T11:26:14.747 回答
0

另一种看待它的方法是使用addEventListener而不是使用它作为 html 代码尝试 JS：

<body onLoad="document.getElementById('<id>').focus();">

    <body>

    <script>

     document.body.addEventListener('load', funcLoad);

     function funcLoad(){

     document.getElementById('<id>').focus();

    }

    </script>
</body>

试试看，它可能比其他解决方案效果更好。

于 2016-02-27T04:18:37.460 回答