HTML 属性：readonly

当 readonly 布尔属性存在时，元素是不可变的，意味着用户无法编辑控件。

尝试一下

概述

如果在 input 元素上指定了 readonly 属性，由于用户无法编辑输入内容，因此该元素不参与约束验证。

text、search、url、tel、email、password、date、month、week、time、datetime-local、number 这些 <input> 类型和 <textarea> 表单控件元素均支持 readonly 属性。如果这些输入类型和元素中存在这个属性，则匹配 :read-only 伪类。如果不包含该属性，则将匹配 :read-write 伪类。

该属性不支持 <select> 或已不可变的 input 类型，也与之无关，如 checkbox、radio 或根据定义不能以值开头的 input 类型，如 file input 类型。range 和 color 都有默认值。hidden input 类型也不支持该属性，因为用户不可能填写隐藏的表单。也不支持任何按钮类型，包括 image。

备注： 只有文本控件可以设置为只读，因为对于其他控件（如复选框和按钮）来说，只读和禁用之间没有任何有用的区别，所以 readonly 属性并不适用。

当输入具有 readonly 属性时，:read-only 伪类也适用于该输入。反之，支持 readonly 属性但未设置该属性的输入将匹配 :read-write 伪类。

属性交互

disabled 与 readonly 的区别在于，只读控件仍可发挥作用，仍可被聚焦，而禁用控件不能接收聚焦，不能随表单提交，一般在启用前不能作为控件发挥作用。

由于只读字段不能通过用户交互改变其值，因此 required 对同时指定了 readonly 属性的输入没有任何影响。

动态修改只读属性值的唯一方法是通过脚本。

备注： required 属性不可以在指定了 readonly 属性上的 input 控件上使用。

可用性

浏览器会显示 readonly 属性。

约束验证

如果元素是只读的，则用户不能更新该元素的值，元素的值也不参与约束验证。

示例

HTML

html
<div class="group">
  <input type="text" value="一些值" readonly="readonly" id="text" />
  <label for="text">文本框</label>
</div>
<div class="group">
  <input type="date" value="2020-01-01" readonly="readonly" id="date" />
  <label for="date">日期</label>
</div>
<div class="group">
  <input type="email" value="一些值" readonly="readonly" id="email" />
  <label for="email">电子邮件</label>
</div>
<div class="group">
  <input type="password" value="一些值" readonly="readonly" id="pwd" />
  <label for="pwd">密码</label>
</div>
<div class="group">
  <textarea readonly="readonly" id="ta">一些值</textarea>
  <label for="ta">消息</label>
</div>

结果

规范

Specification
HTML Standard
# attr-input-readonly
HTML Standard
# attr-textarea-readonly

浏览器兼容性

html.elements.input.readonly

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

html.elements.textarea.readonly

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见