当我应该使用只读而不是禁用时

Question

我想知道什么时候应该使用

readonly

而不是

disabled

，因为在我看来

disabled

更好：可以立即识别出

readonly

不是。

我指定该问题仅涉及可用性，我对提交值或事件冒泡或来自 javascript 或其他语言的任何其他内容的影响不感兴趣。

我不明白为什么有人会想要一个不可用但看起来仍然与完全可用的字段相同的字段。这种行为不会导致使用表单的用户感到困惑吗？

例如：

<label for="firstName">First Name:</label>
<input name="firstName" type="text" value="Adam" />

<label for="age">Age (disabled):</label>
<input name="age" type="number" value="42" disabled />

<label for="hobbies">Hobbies (readonly):</label>
<textarea name="hobbies" readonly>Baseball</textarea>

另外，使用屏幕阅读器的用户必须浏览只读字段，但会完全跳过禁用字段吗？如果他要复制禁用输入中的值怎么办？

Answer 1

您已经知道了：只读字段和禁用字段之间的主要区别在于，前者保持可聚焦并包含在选项卡导航中，而后者在选项卡导航中完全跳过。

如果仅使用键盘无法访问某个字段，则意味着仅使用键盘的用户将无法选择和复制其内容。 屏幕阅读器用户仍然可以通过使用一些解决方法来复制字段的内容，例如从虚拟缓冲区或语音历史记录中复制，但它当然比字段自然可聚焦的情况更不方便用户。 普通用户仍然可以选择和复制内容（除非您使用特定的非标准 CSS 完全阻止它），但无论如何它又不太实用。

因此，如果用户可以在复制字段内容方面有一些用处，那么您应该将其设置为只读而不是禁用。 这只会简化用户的生活。

如果您对视觉方面感兴趣，您当然可以使用 CSS 轻松调整它。视觉方面不应决定您决定只读或禁用。

更一般地说，您可以考虑：

• 禁用意味着内容目前不相关
• 只读意味着用户目前无法修改内容，但并不意味着它不相关

根据情况，将字段设置为只读以允许浏览它们可能是有益的，以便用户可以知道预期的内容和/或已知或计算的数据类型，即使用户无法修改它们直接地。 在其他情况下，这只是无关紧要的，并且禁用更好。

无论如何，请记住，禁用字段可以完全跳过，并且用户可能根本不会发现它们的存在。因此，您应该只禁用与当前情况无关的字段。

让我们举几个例子来展示其中的细微差别：

1. 具有两个数字字段的货币转换器，用户可以在其中输入欧元金额，并可以查看它赚了多少美元
2. 带有文本字段的复选框，允许输入不同的送货地址
3. 包含与您的帐户关联的电话号码的字段，您无法直接修改该字段，因为更改它是复杂过程的一部分（您必须添加新的并验证它）

在示例 #1 中，美元金额是计算结果。用户不能直接修改它，但他/她可以间接修改它，当然它保持相关性！因此第二个字段应该是只读的而不是禁用的。

在示例 #2 中，如果未选中该复选框，则意味着帐单地址和送货地址相同。该值完全无关，因此该字段当然最好禁用而不是只读，以避免进入只会重复两次相同信息的字段。

在示例＃3中，您可能无法立即或直接在当前屏幕上更改您的电话号码，但您仍然可能想要复制它，并且重要的是要表明它存在于您的帐户中，这样您就无法忘掉它。所以该字段只读比禁用要好得多。