臺北企業在外貿詢價表顯示既選型號,卻發現接收資料沒有型號,應先檢查該欄位的實際狀態。畫面不能編輯,可能是唯讀,也可能是停用;兩者對焦點及表單資料的行為不同。以下針對原生HTML欄位示範,不能直接推斷自訂外掛用了相同提交方式。
先看最小離線樣例
<form id="demo-form">
<label for="a">停用示意型號</label>
<input id="a" name="disabled_model" value="DEMO-A" disabled>
<label for="b">唯讀示意型號</label>
<input id="b" name="readonly_model" value="DEMO-B" readonly>
</form>
<script>
const form = document.getElementById("demo-form");
console.log([...new FormData(form).entries()]);
</script>依這個樣例,停用的欄位不會出現在FormData資料中,具名稱的唯讀文字欄位則會保留。MDN同時說明唯讀欄位仍可取得焦點,停用欄位不能。若專案自行用JavaScript組合JSON,則要核對該程式實際選取哪些值,不能用原生FormData的行為代替程式審查。
比較的是行為,不是字色
| 事項 | disabled | readonly |
|---|---|---|
| 一般使用者直接編輯 | 不允許 | 不允許 |
| 取得焦點 | 不能 | 仍可 |
| 原生表單資料 | 不包含停用欄位 | 具名稱且符合條件的欄位可包含 |
| 是否所有控制元件都適用 | 仍需看具體元素及狀態 | 不是所有元素支援,例如select沒有此屬性 |
修正前,先對照接收需求
- 記錄目前元素、名稱、狀態與實際組裝資料的方法。
- 用受控的示意值核對提交前的資料,不送出真實客戶需求。
- 確認未啟用選項與固定顯示資訊各有明確用途。
- 由伺服器核對允許的物件及必要條件。
- 復測鍵盤焦點、畫面說明與接收結果是否一致。
1元素辨認原生或自訂控制元件。
2資料看實際提交包含甚麼。
3驗證後端按規則確認。
4回饋準確說明接受或缺失。
把文字變灰就算停用了嗎?
不是。樣式與元素狀態不同,必須檢視實際屬性和行為。
加required可以強制唯讀欄有內容嗎?
MDN說明readonly輸入不按一般required方式參與此約束;必要資料仍應由正確的程式與伺服器規則保障。