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
伪类。
属性交互
可用性
浏览器会显示 readonly
属性。
约束验证
如果元素是只读的,则用户不能更新该元素的值,元素的值也不参与约束验证。
示例
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