Question

我有一个关于可用性的简单问题。

在文本输入中使用占位符（空文本）的首选方法是：

A）在用户关注该字段之前让它们可见。

B）在用户输入第一个字符之前让它们可见。

大多数网站使用选项A，可能是因为它更容易做（只需听取焦点事件并清除以前的占位符文本并将文本颜色重置为黑色）。

但是，我已经看到选项B也被用在一些随机的地方。我看到它的方式，专业人士是：

A

乙

如果您使用Tab键导航表单，用户通常会在阅读下一个字段之前按下该选项卡，在这种情况下，空文本已经消失，用户很难知道要键入的内容。他们需要使用shift-tab来获取空文本，然后阅读它，并选中它。

另一个问题：如果使用了选项B，那么在用户删除文本后仍然会返回空文本（并且仍然具有焦点）？

Answer 1

我肯定会输入像twitter登录页面这样的输入字段。

它就像你的B方式，有一个非常好的动画。

Answer 2

本着可用性和可访问性的精神，您应该始终存在<label>。在我看来，占位符文本在用作帮助器或格式化指示等时最有效。

例如，您可以使用登录表单来请求用户名和密码，其中用户名是电子邮件地址。然后，占位符可以是焦点清除的示例电子邮件地址（但“用户名”标签仍然可见）。

示例（使用HTML5占位符属性）：

<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="myemail@email.com" />