HTML 属性：readonly
当 readonly 布尔属性存在时，元素是不可变的，意味着用户无法编辑控件。
尝试一下
<label for="firstName">First Name:</label> <input id="firstName" name="firstName" type="text" value="Adam" /> <label for="age">Age:</label> <input id="age" name="age" type="number" value="42" readonly /> <label for="hobbies">Hobbies:</label> <textarea id="hobbies" name="hobbies" readonly>Baseball</textarea> label { display: block; margin-top: 1em; } input:read-only, textarea:read-only { background-color: silver; } 概述
如果在 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
<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 # attr-input-readonly |
| HTML # attr-textarea-readonly |