带有占位符的输入字段的可用性
我有一个关于可用性的简单问题。
这是在文本输入中使用占位符（空文本）的首选方式：
A) 让它们可见，直到用户聚焦该字段。
B) 让它们可见，直到用户键入第一个字符。
大多数网站使用选项 A，可能是因为它更容易做到（只需监听焦点事件并清除以前的占位符文本并将文本颜色重置为黑色）。
然而，我发现选项 B 也被用在一些随机的地方。在我看来，优点是：
A
- 实现简单
- 对用户清晰
B
- 如果使用 Tab 键导航表单，用户通常会在阅读下一个字段之前按 Tab 键，在这种情况下，空文本已经消失，并且用户很难知道要输入什么。他们需要使用 Shift-Tab 键来取回空文本，然后阅读它，然后按 Tab 键找到它。
另一个问题：如果使用选项 B，在用户删除文本（并且仍然具有焦点）后是否应该返回空文本？
I have a simple question regarding usability.
Which is the preferred way of having place holders (empty texts) in text inputs:
A) Have them visible until user focuses the field.
B) Have them visible until user types the first character.
Most websites use the option A, probably because it's easier to do (just listen to focus event and clear the previous place holder text and reset text color to black).
However, I've seen option B also being used in a few random places. The way I see it, the pros are:
A
- Simple to implement
- Clear to the user
B
- If you navigate a form using tab key, users typically press the tab before reading the next field in which case the empty text is already gone and the user has harder time knowing what to type. They would need to shift-tab to get the empty text back, then read it, and tab to it.
Another question: if the option B was used, should the empty text come back after the user removes the text (and still has the focus)?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我肯定会制作像 twitter 登录页面这样的输入字段。
它就像你的 B 方式，并且有一个非常好的动画。
i would certainly make input fields like twitter login page.
it is like your B way and has a very nice animation.
本着可用性和可访问性的精神，您应该有一个始终存在的
。在我看来，占位符文本在用作帮助程序或格式指示等时最有效。例如，您可以有一个请求用户名和密码的登录表单，其中用户名是电子邮件地址。占位符可以是焦点被清除的示例电子邮件地址（但“用户名”标签仍然可见）。
示例（使用 HTML5 占位符属性）：
In the spirit of usability and accessibility, you should have a
<label>that is always present. In my opinion the placeholder text is most effective when used as a helper, or indication of formatting, etc.For example, you could have a signin form that requests username and password where the username is an email address. The placeholder could then be a sample email address that is cleared on focus (but the 'username' label is still visible).
Example (using HTML5 placeholder attribute):