快速對照表
| 屬性/樣式 | 視覺狀態 | 可互動 | 表單提交 | 適用元素 | JS 控制 |
|---|
readonly | 正常顯示，不可編輯 | ✅ 可焦點、可複製 | ✅ 會提交值 | <input>, <textarea> | el.readOnly = true |
disabled | 灰色/置灰，不可編輯 | ❌ 無法焦點、無法複製 | ❌ 不提交值 | 所有表單元素 | el.disabled = true |
display:none | 完全隱藏，不佔版面 | ❌ 不可互動 | ❌ 不提交值 | 所有元素 | el.style.display = 'none' |
visibility:hidden | 隱藏但保留版面空間 | ❌ 不可互動 | ✅ 仍提交值 | 所有元素 | el.style.visibility = 'hidden' |
pointer-events:none | 正常顯示 | ❌ 滑鼠事件穿透 | ✅ 仍提交值 | 所有元素 | el.style.pointerEvents = 'none' |
唯讀輸入框完整範例
<input type="text" id="readonlyInput" value="Hello World!" readonly>
<script>
const el = document.getElementById('readonlyInput');
// JS 動態切換
el.readOnly = false; // 變可編輯
el.readOnly = true; // 回唯讀
</script>
常見場景選擇指南
- 顯示資料但允許複製：
readonly
- 暫時停用欄位（如未滿足條件）：
disabled，提交時記得 el.disabled = false 或用隱藏欄位同步值。
- 條件式顯示/隱藏整個區塊：
display:none / display:block。
- 保留版面但禁用點擊：
pointer-events:none（配合半透明樣式提示使用者）。
無障礙 (a11y) 注意
readonly 元素仍納入 Tab 順序，螢幕閱讀器可讀取。disabled 元素被排除於 Tab 順序，需搭配 aria-disabled="true" 於可聚焦容器說明。- 隱藏內容若需對螢幕閱讀器可用，請用
.sr-only 類別而非 display:none。
