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
載入中…