先看這個例子
文字欄連到 datalist,內有兩個假設編輯器名稱。練習輸入清單以外的「其他編輯器」。輸入文字並不代表已配對業務紀錄,亦不會產生權限。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 清單參考 | 查看 input.list 指向 | 指向 id=editors 的 datalist,內有兩項 |
| 建議文字 | 輸入編輯器甲 | 欄位保留文字;validity.valid=true |
| 清單外文字 | 輸入其他編輯器 | 欄位照樣保留;validity.valid=true |
瀏覽器怎樣處理
list 把文字欄與 datalist 建議連起來,並不把輸入值限制在這些 option。工作若要求已知識別碼或指定選項,須另訂核對規則,或選合適的限制型控制項。建議視窗的操作和外觀由瀏覽器及平台決定。
有建議清單,不等於已輸入已知值
反例起初已填一個不在清單的值,但仍連着相同 datalist。只看有 list 就當作已知紀錄,便會判錯。
<label for="editor">常用編輯器</label><input id="editor" type="text" list="editors" value="其他編輯器"><datalist id="editors"><option value="編輯器甲"></option><option value="編輯器乙"></option></datalist>清單外值會保留,原生 validity 仍為 true。這個旗標和 datalist 都不能證明找到相符 option。
試着修正
欄位填了「其他編輯器」,validity.valid 是 true,可否推定它符合其中一項建議?
查看參考答案
不能。按本例原生條件,它是可接受的文字輸入,但不符合任何建議值。工作若要求在名單內,須另外核對。
- 核對真正 list 關聯及兩個 option 值。
- 測試清單外值,不聲稱各系統建議選單完全相同。