[HTML] input入力候補datalist実装する方法

1 min read

対象仕様

  • HTML5 に対応したモダンブラウザ
  • ブラウザ標準の簡素な UI

detalist を使う

<datalist>要素を使用することで仕様から外れた DOM を実装したり、JS を走らせずに済む。

<datalist>は、フォームの入力欄などで入力候補となるデータリストを定義することができる。

<input type="text" list="browsers" />
<datalist id="browsers">
  <option value="1"></option>
  <option value="2"></option>
  <option value="3"></option>
  <option value="4"></option>
  <option value="5"></option>
</datalist>

datalistinputは、list属性とid属性で紐づけ、対象のリスト項目は、<option>で定義する。
<datalist>~</datalist>はブラウザ上で非表示となる。


未対応のレガシーブラウザ用に polyfill(datalist-polyfill)もある。

デモ

input 要素をダブルクリックすると候補が表示される。

このページをシェアする

関連タグ

関連記事

`.sr-only`のような非表示スタイルとSEOの関係性の調査

非表示要素はブラックハット SEO ではないのか

[Vite] CSSだけをビルドする方法

背景 / Vite をインストール / 仕様

CSS in JSとは何か

想定読者 / そもそも JS フレームワーク(React、Vue.js)を採用する理由とは何か / 「命令的 UI」 と 「宣言的 UI」 / 「命令的 UI」 VS 「宣言的 UI」 / CSS in JS とは / CSS in JS ライブラリ / Emotion の使い方 / 利用するメリット / 利用するデメ

[CSS in JS] 外部のリセットCSSを使う方法

目的 / 課題 / おまけ

竈門炭治郎をCSS Paint APIで再現する

概要 / 完成品 / 実装方法 / 〆 / 参考

[JavaScript] 不正なセレクタをエスケープする際の対処法

セレクタとして不正な文字 / JavaScript 上での取扱