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

发布于 2024-12-19 13:11:29 字数 238 浏览 2 评论 0原文

我们倾向于将光标定位在所有新创建的对象的第一个元素上（例如用户的名称字段或登录页面上的电子邮件ID字段）。在 User.update 上自动聚焦于用户的名称字段是否有意义，因为用户可以修改 User 的任何其他字段，并且在执行 User.update 时进行自动聚焦实际上标记整个 name 字段，而不是将光标定位在 name 元素上。正确的行为应该是什么？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

倾城花音 2024-12-26 13:11:29

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

因此，您需要问这样的问题：“此页面上执行的最常见任务是什么？”

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

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

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

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

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

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

这种情况曾经在 Yahoo! 上发生过。始终显示邮件的登录屏幕。如果页面加载缓慢，登录表单将在 DOM 准备好之前渲染几秒钟，并且只有在准备好时才会触发自动对焦。因此，我会手动单击以将焦点集中在登录字段中，当自动对焦将我的光标默默地移回登录字段时，我已经输入了一半的密码，我会抬头看屏幕，找到一半的密码。密码以纯文本形式出现在登录字段中，与我的用户名相冲突。

修复方法非常简单；只需检查登录字段是否仍为空白，然后再关注该字段。否则不要这样做，因为你知道用户已经输入了一些内容，而自动对焦的便利性会变成一种挫败感。下面是示例代码，假设为您的字段指定了 id="username"：

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

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

The purpose of auto-focus behavior on a web page is to save users from moving off the keyboard to make a mouse action for the most common task on that page.

So you need to ask the question: "What is the most common task performed on this page?"

Then ask, "What is the first UI element (field) a user needs to access or edit to accomplish the most common task(s) on this screen?"

Your answer should determine where your auto-focus goes. But be careful - users expect the auto-focus to go on the first field on the page. So only place it elsewhere if you are sure that this is desirable to the users. And also in that case, consider moving that field to the top of the page.

In your case, the "name" element gets entirely marked (selected) because that is how auto-focus works for fields that already contain data. This is the most desirable behavior because it allows the user to replace the contents of the field without doing further work with the cursor and delete keys, and if they only want to edit, they can simply use the Home/End and arrow keys to quickly move the cursor where they need it.

===== Edit / Addendum =====

I forgot to add this in the original answer, but it's such a huge pet peeve of mine that I have to mention it here.

Please, if you do an auto-focus, make sure it doesn't fire if the user is already typing! There is NOTHING more annoying than having your cursor moved automatically while you're in the middle of logging in.

This used to happen on Yahoo! Mail's login screen all the time. If the page was loading slowly, the login form would render a few seconds before the DOM was ready and the auto-focus only fired when it was ready. So I'd click manually to focus in the login field, and I'd already be halfway through my password when auto-focus would silently move my cursor back to the login field and I'd look up at the screen to find half my password in plain text up in the login field, smashed up against my username.

The fix is so simple; just check if the login field is still blank before focusing there. Otherwise don't because you then know the user already typed something and the convenience of auto-focus would turn into a frustration. Here's example code, assuming your field is given an id="username":

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

Also consider calling focusIfBlank() inline instead of when the DOM is ready, because you'll increase the chances of it being useful to the user since it will focus almost instantly after it's rendered.

回复收藏 0 原文

愛上了 2024-12-26 13:11:29

我不确定这是否是您的答案，

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

参考此< /a>,以及此了解更多选项..

I am not sure whether its your answer,

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

Refer this,and this for more options..

回复收藏 0 原文

~没有更多了~

关于作者

彼岸花ソ最美的依靠

暂无简介

文章

521 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

忆悲凉

hgfg1645

qq_qLPLYi

戏舞

殊姿

﹂绝世的画

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（2）

关于作者

相关话题

热门标签

推荐作者

忆悲凉

hgfg1645

qq_qLPLYi

戏舞

殊姿

﹂绝世的画

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。