前提
<input>
にはlist
という属性があって、HTMLに存在する<datalist>
のid
を指定することで、入力フォームに対するサジェストとして動作させることができます。
そして、Chromeでは、list
を設定した<input>
にフォーカスを当てると、右側に▼が出現してリストがあることが明示されます。
発生している問題・エラーメッセージ
動的にlist
属性を削除した場合に、リストに紐づいていないにも関わらず▼は出現するままとなる
やりたいこと
とりあえず「<input>
要素ごと作り直す」方法はありそうだけど、それ以外にこの▼が出ない状態へ戻す手段はあるのか
(なお、「CSSでボタンを非表示にする」こともできなくはなさそうですが、HTML/JSのトラブルをCSSで尻拭いさせるのも避けたいです)
該当のソースコード
(動作検証用にシンプルにしたものです)
html
1<input type="text" list="list" id="input"> 2<button type="button" id="button"> 3list抹消 4</button> 5<datalist id="list"> 6 <option value="ほげ">ほげ</option> 7</datalist>
js
1document.getElementById('button').addEventListener('click', () => { 2 document.getElementById('input').removeAttribute('list'); 3}, false)
試したこと
- 実環境ではReact+Bootstrapの環境で起きていたので、環境要因かと思いライブラリなしの環境で試験したけど再現する
- Developer ToolsからHTMLを編集して
list
属性を消しても同様の状況になる - Firefoxで検証しようとしたけど、元の挙動が違って、そもそも正しく紐づいていても▼が出ない
補足情報(FW/ツールのバージョンなど)
- Chrome 107.0.5304.107(Windows)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/11/21 02:01