HTML 屬性：readonly

布林型readonly屬性，如果存在，則使元素不可變，這意味著使用者無法編輯控制元件。

概述

如果在輸入元素上指定了readonly屬性，因為使用者無法編輯輸入，所以該元素不參與約束驗證。

readonly 屬性受 text、search、url、tel、email、password、date、month、week、time、datetime-local 和 number <input> 型別以及 <textarea> 表單控制元件元素的支援。如果在任何這些輸入型別和元素上存在該屬性，則 :read-only 偽類將匹配。如果未包含該屬性，則 :read-write 偽類將匹配。

該屬性不受 <select> 或本身不可變的輸入型別（例如 checkbox 和 radio）或根據定義無法以值開始的輸入型別（例如 file 輸入型別）的支援或與之相關。range 和 color 也是如此，因為兩者都有預設值。它也不受 hidden 的支援，因為不能期望使用者填寫隱藏的表單。它也不受任何按鈕型別（包括 image）的支援。

注意：只有文字控制元件才能設為只讀，因為對於其他控制元件（例如複選框和按鈕），只讀和停用之間沒有有用的區別，因此 readonly 屬性不適用。

當輸入具有 readonly 屬性時，:read-only 偽類也應用於它。相反，支援 readonly 屬性但未設定該屬性的輸入與 :read-write 偽類匹配。

屬性互動

disabled 和 readonly 之間的區別在於，只讀控制元件仍然可以正常工作並且仍然可聚焦，而停用控制元件則無法接收焦點，不會與表單一起提交，並且通常在啟用之前不會作為控制元件發揮作用。

因為使用者互動無法更改只讀欄位的值，所以 required 對也指定了 readonly 屬性的輸入沒有任何影響。

動態修改 readonly 屬性值的唯一方法是透過指令碼。

注意：對於指定了 readonly 屬性的輸入，不允許使用 required 屬性。

<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 屬性：readonly

試一試

概述

屬性互動

可用性

約束驗證

示例

HTML

結果

規範

瀏覽器相容性

html.elements.input.readonly

html.elements.textarea.readonly

另請參閱