2022-09-29

在 input + datalist 情況下如果確定值的切換是由 datalist 的 option 而來的?

See the Pen Input + datalist + trigger by cheaster43 (@cheaster) on CodePen.

以 codepen 所示,主要是利用 input 的 keydown 事件來進行,真的實際在 input 輸入值時,事件的型式會是 keyboardEvent ,若是利用 datalist 的選項來點選的,仍會觸發 keydown 的事件,只是型式就不是 keyboardEvent 了。

比較能利用的方式是確認事件發生時所帶的資料中有沒有 key 這屬性,如果沒有就是透過 datalist 進行的。

雖然,按理來說應該是在 input 去 listen 值 onchange 的事件就行,我本來一開始的寫法也是如此,但因為實際上我真實的案例會是 datalist 的 option 會因為 input 的值的變動而向 api 進行取值來建立,所以…一開始 onchange 的狀況還算正常,但總是會遇到因為輸入 input 的值的打字數度超過年紀較大的人的動眼觀感,也因如此,有時(還滿常發生)在第一次 api response 塞值前的檢驗有效值就會讓本案的 cp 值下降,故再進行環境