inputやtextareaの入力補助

Published at 2015-06-22

<input>の入力補助には<datalist>を使ったものがある。補助候補を<datalist>と<option>を使って定義し、そのIDを適用先の<input>のlist属性に付与する。以下サンプル。

Chromeだと領域の右端に▼が表示されているし、候補のドロップダウンやその▼はまさにブラウザネイティブのUIといった感じだが、どうもスタイリングが出来ない。古いという意味で信頼性に欠けるがRelevant Dropdowns: Polyfill for Datalistにも不可能っぽいことが書いてある。Shadow DOMだろうからインスペクタ使ってセレクタを調べようとしたけど、フォーカスアウトするとダメで断念した。

これらに加えて、テキストエリアでは機能しない。僕はテキストエリアでサジェストされて欲しいんです。

input-suggest

jQueryプラグインだとチラホラ見かけるけど、jQueryナシが良いし、自分の勉強も兼ねて実装してみた。InputSuggestコンストラクタに<textarea>要素・<input type="text">要素、ないしそれらを参照するセレクタを渡すと実行される。また、ポップアップはそのままだとスタイルが当たっていないので各自でCSSを書いてもらう必要がある。

<datalist>を<textarea>でも機能させるというコンセプトにしようかとも考えたが、定義されてもいないポリフィルを実装するような感覚に陥りそうだったのでやめた。