網頁表單需「顯示資料但不可編輯」時，常用 `` 或 ``。兩者外觀相似但提交行為截然不同，另有 CSS `pointer-events:none` + JS `onfocus="this.blur()"` 進階作法。完整比較如下。
方法一：readonly（推薦：需提交數值）
<input type="text" value="無法修改" readonly>
- 使用者可選取、複製文字。
- 表單送出時會攜帶此欄位數值。
- 可透過 CSS 區分樣式：`input[readonly] { background:#f5f5f5; }`
方法二：disabled（完全禁止互動）
<input type="text" value="完全鎖定" disabled>
- 使用者無法焦點、無法選取、無法複製。
- 表單送出時不會攜帶此欄位（後端收不到）。
- 瀏覽器自動灰化樣式，不可覆寫（除非用 CSS `opacity`）。
方法三：JS 強制失焦（不改屬性，僅行為鎖定）
<input type="text" value="鎖定中" onfocus="this.blur()">
- 滑鼠點擊瞬間失去焦點，視覺上像 disabled 但實際屬性正常。
- 表單送出會攜帶數值。
- 無障礙存取較差，螢幕閱讀器可能誤判，建議搭配 `aria-readonly="true"`。
關鍵字補充
| 事件/屬性 | 說明 |
|---|
onfocus | 元素取得焦點時觸發 |
focus() | 程式化讓元素取得焦點 |
onblur | 元素失去焦點時觸發 |
blur() | 程式化讓元素失去焦點 |
選擇建議
- 需送出數值 → readonly
- 完全不互動、不送出 → disabled
- 特殊 UI 需求（如自訂右鍵選單） → JS blur + CSS pointer-events:none
掌握三種作法差異，表單唯讀控制不再踩坑！
