2

我们倾向于将光标定位在所有新创建对象的第一个元素上（例如name field for user或email id field on the login page）。自动聚焦在name field for userUser.update 上是否有意义，因为用户可以修改 User 的任何其他字段并在执行 User.update 时自动聚焦实际上标记整个name字段而不是将光标定位在name元素上. 正确的行为应该是什么？

4

2 回答 2

7

网页上的自动对焦行为的目的是避免用户离开键盘来为该页面上最常见的任务进行鼠标操作。

所以你需要问一个问题：“在这个页面上执行的最常见的任务是什么？”

然后问：“用户需要访问或编辑以完成此屏幕上最常见任务的第一个 UI 元素（字段）是什么？”

你的答案应该决定你的自动对焦的去向。但要小心——用户希望自动聚焦在页面的第一个字段上。因此，如果您确定这对用户来说是可取的，请仅将其放置在其他地方。在这种情况下，请考虑将该字段移至页面顶部。

在您的情况下，“名称”元素被完全标记（选中），因为这就是自动对焦对已经包含数据的字段的工作方式。这是最理想的行为，因为它允许用户在不使用光标和删除键的情况下替换字段的内容，如果他们只想编辑，他们可以简单地使用 Home/End 和箭头键快速将光标移动到他们需要的地方。

===== 编辑/附录 =====

我忘了在原始答案中添加这个，但这是我的一个巨大的烦恼，我不得不在这里提到它。

请，如果您进行自动对焦，请确保如果用户已经在打字，它不会触发！没有什么比在登录过程中自动移动光标更烦人的了。

这曾经发生在雅虎！邮件的登录屏幕一直。如果页面加载缓慢，登录表单将在 DOM 准备好之前呈现几秒钟，并且仅在准备好时才会触发自动对焦。因此，我会手动单击以将注意力集中在登录字段中，而当自动对焦会默默地将光标移回登录字段时，我的密码已经过了一半，我会抬头看屏幕以找到我的一半登录字段中的纯文本密码，与我的用户名相撞。

修复很简单；只需检查登录字段是否仍然为空白，然后再关注那里。否则不要这样做，因为你知道用户已经输入了一些东西，自动对焦的便利性会变成一种挫败感。这是示例代码，假设您的字段被赋予id="username"：

function focusIfBlank(){
    username = document.getElementById('username'); 
    if(username.value == "") {
        username.focus();
    }
}

还可以考虑在内联调用 focusIfBlank() 而不是在 DOM 准备好时调用，因为你会增加它对用户有用的机会，因为它会在渲染后几乎立即聚焦。

于 2011-12-08T18:05:25.533 回答
0

我不确定它是否是你的答案，

<body>
    Name: <input type="text" autofocus /> <br />
    Email: <input type="text" />
</body>

请参阅此，以及此以获取更多选项..

于 2011-12-12T06:50:57.110 回答