HTML 属性:readonly

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

尝试一下

概述

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

textsearchurltelemailpassworddatemonthweektimedatetime-localnumber 这些 <input> 类型和 <textarea> 表单控件元素均支持 readonly 属性。如果这些输入类型和元素中存在这个属性,则匹配 :read-only 伪类。如果不包含该属性,则将匹配 :read-write 伪类。

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

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

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

属性交互

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

由于只读字段不能通过用户交互改变其值,因此 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

html.elements.textarea.readonly

BCD tables only load in the browser

参见