当您尝试更新对象时，如何处理对字段元素的自动对焦

How to handle auto-focus on field elements when you try to update an object

本文关键字：字段 处理 元素 更新 对象 何处理      更新时间：2023-09-26

我们倾向于将光标定位在所有新创建对象(例如name field for user或email id field on the login page)的第一个元素上。在用户上自动对焦name field for user有意义吗?更新，因为用户可以修改user的任何其他字段并在做user时进行自动对焦。update实际上标记了整个name字段，而不是将光标定位在name元素上。什么才是正确的行为?

在网页上设置自动对焦行为的目的是为了让用户不用离开键盘而用鼠标操作该页面上最常见的任务。

所以你需要问这个问题:"在这个页面上最常见的任务是什么?"

然后问，"为了完成这个屏幕上最常见的任务，用户需要访问或编辑的第一个UI元素(字段)是什么?"

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

在您的例子中，"name"元素被完全标记(选中)，因为这就是自动聚焦已经包含数据的字段的工作方式。这是最理想的行为，因为它允许用户替换字段的内容，而不需要对光标和删除键做进一步的工作，如果他们只想编辑，他们可以简单地使用Home/End和箭头键快速移动光标到他们需要的地方。

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

我忘了在原来的答案中加上这一点，但这是我的一大烦恼，所以我不得不在这里提一下。

如果你使用自动对焦功能，请确保它不会在用户已经输入时触发!没有什么比在登录过程中光标自动移动更烦人的了。

这曾经发生在雅虎!邮件的登录屏幕。如果页面加载缓慢，那么登录表单将在DOM准备好之前几秒钟才呈现，并且只有在DOM准备好时才触发自动对焦。所以我会手动点击登录栏进行对焦，当我已经输入了一半的密码时，自动对焦会无声地将我的光标移回登录栏，我抬头看屏幕，在登录栏中发现了一半的纯文本密码，与我的用户名相对应。

修复是如此简单;只需检查登录字段是否仍然是空白的，然后再集中在那里。否则不要这样做，因为你知道用户已经输入了一些东西，自动对焦的便利性会让你感到沮丧。下面是示例代码，假设您的字段是id="username":

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

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

我不确定这是不是你的答案，

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

相关文章：