何时使用 readonly 而非 disabled：面向可用性的决策指南-html教程-PHP中文网

何时使用 readonly 而非 disabled：面向可用性的决策指南

本文聚焦纯可用性视角，阐明 readonly 与 disabled 的核心差异——前者保持焦点可达、支持键盘导航与内容复制，后者完全脱离交互流；选择应基于用户是否需感知、定位或复用字段内容，而非视觉样式。

本文聚焦纯可用性视角，阐明 `readonly` 与 `disabled` 的核心差异——前者保持焦点可达、支持键盘导航与内容复制，后者完全脱离交互流；选择应基于用户是否需感知、定位或复用字段内容，而非视觉样式。

在表单设计中，readonly 和 disabled 常被误认为可互换的“禁用”手段，但二者在人机交互层面存在本质区别：

✅ readonly 字段仍可获得焦点（Tab 键可到达）、支持全选（Ctrl+A）与复制（Ctrl+C），屏幕阅读器能正常播报其内容；
❌ disabled 字段完全从键盘导航流中移除，无法聚焦，内容不可选、不可复制，屏幕阅读器通常跳过该元素（除非主动查阅虚拟缓冲区等高级功能）。

因此，决策的关键不在于“哪个看起来更像禁用”，而在于：用户是否需要知晓、定位或复用该字段的信息？

✅ 推荐使用 readonly 的典型场景

当字段内容虽不可编辑，但对用户具有持续认知价值或操作价值时，应优先选用 readonly：

<!-- 场景1：计算结果（如汇率换算） -->
<label>欧元金额：</label>
<input type="number" name="euro" value="100"><label>对应美元（自动计算）：</label>
<input type="number" name="usd" value="109.42" readonly><!-- 场景3：账户关键信息（如已验证手机号） --><label>绑定手机号：</label>
<input type="tel" name="phone" value="+86 138****1234" readonly>

? 用户可能需要复制美元金额用于比价，或复制手机号用于短信验证——readonly 保障了这些低摩擦操作。

❌ 推荐使用 disabled 的典型场景

当字段在当前上下文中完全无关、冗余甚至会造成干扰时，disabled 更合适：

<!-- 场景2：未启用的配送地址（复选框未勾选） -->
<input type="checkbox" id="use-different-address"><label for="use-different-address">使用不同收货地址</label>

<!-- 仅当复选框勾选时才启用该字段 -->
<input type="text" name="delivery-address" placeholder="请输入收货地址" disabled>

⚠️ 此时若设为 readonly，用户 Tab 导航会意外停在空字段上，产生困惑：“这是什么？为什么不能填？” 而 disabled 明确将其从交互路径中剔除，符合心智模型。

? 视觉一致性 ≠ 行为一致性

你完全可以通过 CSS 统一二者外观，消除“readonly 看起来像可编辑”的疑虑：

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