Firefoxでinput[type="search"]のchangeイベントが発火しない

表題の通り、FirefoxやIEだとinput[type="search"]にchangeイベントを設定しても発火しません。
データリストからデータを選択後に発火してほしいです。
(他のモダンブラウザだと正常に発火しました)

こちら原因わかる方いっしゃいますでしょうか？

html
1<input list="test" type="search">
2<datalist id="test">
3  <option value="hoge"></option>
4  <option value="foo"></option>
5  <option value="bar"></option>
6</datalist>

jQuery
1$('input[type="search"]').on('change', function () {
2  console.log("change event is triggered."); // FirefoxやIEだと発火しない
3})

行動規範の内容に同意します

回答3件

データリストからデータを選択後に発火してほしいです。

選択しただけだと発火しませんが、
その後、フォーカスを別のどこかへ移動したタイミングで発火しませんか?

Firefoxでは、changeイベントの発火タイミングが、type="text"なinputと同じなんだと思います。

投稿2021/03/12 22:53

gpsoft

総合スコア1323

Jake5

2021/03/13 10:53

選択した時に発火させたいのですが難しいのですね。 changeイベントの代わりにinputイベントを使用すると発火しますね！ただ、inputイベントを使用するとキーボード入力した瞬間に発火してしまいますね。 Firefoxで以下のような挙動が実現できるハック的なものは存在するのでしょうか？データリストからデータを選択後→発火させるキーボード入力→発火させない

行動規範の内容に同意します

ベストアンサー

inputイベントをとって、求める値ではなかったときに弾けばいいのでは

js
1const values = [...$('#test > option')].map(opt => opt.value);
2$('input[type="search"]').on('input', function (evt) {
3  if(values.indexOf(evt.target.value) < 0) return;
4  console.log("change event is triggered.");
5})