选择readonly还是disabled：可用性指南

先说一个核心判断：在表单设计里，readonly 和 disabled 常被当成“禁用”的两种写法来互换，但它们背后的人机交互逻辑，其实差得很远。

很多人会下意识觉得，只要字段不让改了，视觉上灰掉就行了。但从可用性角度看，真正的决策依据，根本不在“看起来怎么样”，而在于——用户是否还需要感知、定位、甚至复制这个字段里的内容？

这才是选择的核心标准。

核心差异在哪里

简单来说，两个字段的交互行为有本质不同：

• readonly 字段：依然可以获得焦点，键盘通过 Tab 键能跳到它上面；用户可以用 Ctrl+A 全选内容，然后用 Ctrl+C 复制；屏幕阅读器也能正常读出它的内容。
• disabled 字段：完全从键盘导航流中被移除。用户无法聚焦上去，里面的内容既不能选也不能复制。屏幕阅读器一般会直接跳过它——除非用户主动用虚拟缓冲区这类高级功能去查看。

所以，关键问题就变成了：用户是否需要知道这个字段的存在？是否需要定位它？是否需要复制它的内容？

推荐使用 readonly 的典型场景

如果字段内容虽然不能改，但对用户来说依然有价值、甚至需要被操作，那就该用 readonly。

欧元金额：对应美元（自动计算）：绑定手机号：

想想看，用户可能需要把汇率计算出来的美元金额复制过去比价，或者把已验证的手机号复制出来用做信息验证——readonly 能让这些操作毫无摩擦地完成。

推荐使用 disabled 的典型场景

反过来，如果字段在当前上下文里压根不相关，甚至会让用户感到困惑，那就用 disabled。

使用不同收货地址

这里如果用了 readonly，用户按 Tab 键导航时就会莫名其妙停在空字段上，心里犯嘀咕：“这什么玩意儿？怎么还不能填？” disabled 则明确告诉用户——这个元素不在当前交互路径中，符合正常的心智模型，不会造成干扰。

视觉一致 ≠ 行为一致

当然，实践中完全可以靠 CSS 把两个字段的外观统一起来，打消“readonly 看起来像能编辑”的视觉疑虑：

input[readonly], input:disabled {  background-color: #f5f5f5;  border: 1px solid #ccc;  color: #666;  cursor: not-allowed;}/* 语义差异保留：readonly 可聚焦，disabled 不可 */

样式可以一样，但交互行为不能混淆。

一句话决策心法

用 readonly —— 内容重要但不可改；
用 disabled —— 内容此刻不存在或不相关。

最后提醒一句：别为了视觉统一牺牲可访问性。屏幕阅读器用户依赖焦点流来理解表单结构，键盘用户靠 Tab 完成高效操作。readonly 是一种包容性的设计承诺，让用户依然能感知和操作信息；而 disabled 是精准的信息减法，减少不必要的认知负担。两者的使用，其实是设计师对用户任务理解的体现。