为什么不该使用占位文本（placeholder）作为提示文本的14个理由

占位符属性通常用于在文本输入框中添加提示文本，或作为适当标签的替代。

当用户输入时，占位文本会消失以腾出空间供回答。这种方法很受欢迎，因为它节省空间并具有极简主义的美感。

但是使用占位文本作为标签（甚至只是提示文本）会降低用户体验，而且完全没有必要。

原因一：它们很难记住

这是因为当用户开始输入答案时，占位文本会消失。

用户可能需要删除他们的答案以查看说明，这会减慢用户的速度并增加认知负荷。

原因二：裁剪长文本

长占位文本被裁剪，导致无法访问。

原因三：可能被误认为是一个答案

这是因为用户可能会将提示误认为是真正的答案。（具体解释请看以下链接）

https://www.uxmatters.com/mt/archives/2010/03/dont-put-hints-inside-text-boxes-in-web-forms.php

当他们提交表格时，他们将不得不修复一个不是他们的错的错误。

另外，一些注意到这段文字的用户尝试选择并删除它。这是令人沮丧的，因为占位文字无法被选择。

原因四：一旦输入，变得模糊不清

当一个字段已经被回答时，不清楚该值与何相关或是否符合格式要求。

原因五：很难检查

一些用户在提交答案之前会检查它们。由于占位文本不再可用，将很难将他们的答案与要求进行对比。

原因六：修复错误更加困难

这是因为标签和提示文本（此时可能会缺失）为答案和错误提供了上下文。

原因七：对比度低

占位文本与用户输入之间的对比度较低。但这使得视力受损或遇到屏幕反光等问题的人难以阅读。

原因八：与自动完成功能不兼容

浏览器的自动填充功能会自动填充字段。这意味着用户不知道这些值与何相关，从而难以检查答案。

原因九：有些屏幕阅读器无法识别

这意味着屏幕阅读器不会宣读占位文本，可能导致用户无法理解如何回答问题。

原因十：有些浏览器无法翻译

例如，Chrome浏览器不会翻译占位文本。

原因十一：减小了标签的点击区域

当点击标签时，相关的输入框会获得焦点。这对于有运动障碍的用户尤其有用。

使用占位文本会减少输入区域的点击范围。

原因十二：看起来像Windows高对比度模式中的用户输入

在Windows的高对比度模式下，占位文本会被赋予高对比度的颜色，很容易被误认为是用户输入。

原因十三：一些浏览器缺乏支持

在不支持占位符的浏览器中，用户将看不到任何指示。

原因十四：一些旧版浏览器在输入框获得焦点时会隐藏它们

正确做法：将标签（以及任何提示文本）放在输入框上方。

结束

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。