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

Question

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

Answer 1

在网页上自动聚焦行为的目的是使用户不必离开键盘以对该页面上最常见的任务进行鼠标操作.

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

然后问:"用户需要访问或编辑的第一个UI元素(字段)是什么,以完成此屏幕上最常见的任务？"

您的答案应确定自动对焦的位置.但要小心 - 用户希望自动对焦能够进入页面的第一个字段.因此,如果您确定这对用户来说是理想的,那么只能将它放在其他地方.在这种情况下,请考虑将该字段移动到页面顶部.

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

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

我忘记在最初的答案中加上这个,但是我的这个如此巨大的宠儿我不得不在这里提到它.

如果您进行自动对焦,请确保在用户输入时不会触发!当您正在登录时,没有比让光标自动移动更令人讨厌的了.

这曾经发生在Yahoo! 邮件的登录屏幕一直都是.如果页面加载缓慢,前DOM准备和自动对焦,只有当它准备发射的登录表单会使几秒钟.所以我会手动点击以关注登录字段,当自动对焦无声地将光标移回登录字段时,我已经在密码的中途,我会抬头看屏幕找到我的一半在登录字段中的纯文本密码,粉碎我的用户名.

解决方案很简单; 只需检查登录字段是否仍为空白,然后再聚焦.否则不要因为你知道用户已经输入了某些东西而且自动对焦的便利性会变成沮丧.这是示例代码,假设您的字段被赋予id="username":

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

另外考虑调用focusIfBlank()内联而不是DOM准备就绪,因为你会增加它对用户有用的几率,因为它会在渲染后几乎立即聚焦.