跳至內容
Astera Technology

datalist 只提供建議,未必限制輸入

清單建議兩個值,仍可以輸入第三個;用原生核對看清楚,它不是允許值名單。

原生文字建議;仍可輸入清單以外的值。

下載完整個案資料及參考答案 ↓

先看這個例子

文字欄連到 datalist,內有兩個假設編輯器名稱。練習輸入清單以外的「其他編輯器」。輸入文字並不代表已配對業務紀錄,亦不會產生權限。

輸入與瀏覽器原生結果
情況輸入或查看方法結果與意思
清單參考查看 input.list 指向指向 id=editors 的 datalist,內有兩項
建議文字輸入編輯器甲欄位保留文字;validity.valid=true
清單外文字輸入其他編輯器欄位照樣保留;validity.valid=true
下載可編輯 CSV ↓

瀏覽器怎樣處理

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 值。
  • 測試清單外值,不聲稱各系統建議選單完全相同。

原始例子檔案

相關資源