HTML 属性：readonly

布尔型readonly属性，如果存在，则使元素不可变，这意味着用户无法编辑控件。

试一试

概述

如果在输入元素上指定了readonly属性，因为用户无法编辑输入，所以该元素不参与约束验证。

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

该属性不受 <select> 或本身不可变的输入类型（例如 checkbox 和 radio）或根据定义无法以值开始的输入类型（例如 file 输入类型）的支持或与之相关。range 和 color 也是如此，因为两者都有默认值。它也不受 hidden 的支持，因为不能期望用户填写隐藏的表单。它也不受任何按钮类型（包括 image）的支持。

注意：只有文本控件才能设为只读，因为对于其他控件（例如复选框和按钮），只读和禁用之间没有有用的区别，因此 readonly 属性不适用。

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

属性交互

disabled 和 readonly 之间的区别在于，只读控件仍然可以正常工作并且仍然可聚焦，而禁用控件则无法接收焦点，不会与表单一起提交，并且通常在启用之前不会作为控件发挥作用。

因为用户交互无法更改只读字段的值，所以 required 对也指定了 readonly 属性的输入没有任何影响。

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

注意：对于指定了 readonly 属性的输入，不允许使用 required 属性。

可用性

浏览器显示 readonly 属性。

约束验证

如果元素为只读，则用户无法更新元素的值，并且不参与约束验证。

示例

HTML

html
<div class="group">
  <input type="text" value="Some value" readonly="readonly" id="text" />
  <label for="text">Text box</label>
</div>
<div class="group">
  <input type="date" value="2020-01-01" readonly="readonly" id="date" />
  <label for="date">Date</label>
</div>
<div class="group">
  <input type="email" value="Some value" readonly="readonly" id="email" />
  <label for="email">Email</label>
</div>
<div class="group">
  <input type="password" value="Some value" readonly="readonly" id="pwd" />
  <label for="pwd">Password</label>
</div>
<div class="group">
  <textarea readonly="readonly" id="ta">Some value</textarea>
  <label for="ta">Message</label>
</div>

结果

规范

规范
HTML 标准
# attr-input-readonly
HTML 标准
# attr-textarea-readonly

浏览器兼容性

html.elements.input.readonly

BCD 表格仅在浏览器中加载

html.elements.textarea.readonly

BCD 表格仅在浏览器中加载

另请参阅