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 属性，由于用户无法编辑输入，该元素将不参与约束验证。
readonly 属性支持文本表单控件，包括
该属性与所有其他元素无关，包括 <select> 和 <button>。它也不适用于非文本输入元素，包括
支持 readonly 属性但未设置该属性的输入匹配 :read-write 伪类。所有其他元素匹配 :read-only 伪类。
属性交互
disabled 和 readonly 之间的区别在于，只读控件仍然可以工作并且仍然可以获得焦点，而禁用控件无法获得焦点，也不会随表单一起提交，并且通常不会作为控件工作，直到它们被启用。
由于用户交互无法更改只读字段的值，因此 required 对同时指定了 readonly 属性的输入没有影响。
动态修改只读属性值的唯一方法是通过脚本。
注意： required 属性不允许用于指定了 readonly 属性的输入。
可用性
浏览器会显示 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
加载中…
html.elements.textarea.readonly
加载中…