html5メモ inputタグで入力の候補を表示してみる
野暮用で必要になったので、試してみる。
htmlページはこんな感じ。
<html> <!-- header --> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <!-- body --> <body> <datalist id="color"> <option value="red" /> <option value="green" /> <option value="blue" /> </datalist> <input type="text" autocomplete="on" list="color"> </body> </html>
やるこた4つ。
- <datalist>タグにid属性を設定する
- <datalist>タグの中に<option>タグで表示したい候補を設定する
- <input>タグのautocomplete属性を"on"にする
- <input>タグにlist属性をつけて、<datalist>タグのid属性の名前を指定する
とりあえず、Firefoxで表示。
で、候補を表示するとこんな感じ。
html5に対応していないブラウザ(特にIE6、IE8あたり?)はjQueryを使ってJavaScriptで実装したりする必要があるみたい。
ま、メモってことで。
プログラミングautocomplete,datalist,HTML5,iD,IE10,IE6,IE8,IE9,input,Internet Explorer,JavaScript,jQuery,List,option,オートコンプリート,タグ,テキストボックス,ブラウザ,候補,属性
関連記事
Firefox OSメモ アプリ起動時にファイルリストが表示されたときの対応をしてみる
いろいろ試していたら、アプリを起動したときにメイン画面が表示される、ファイルリス ...
html5 & css3メモ divタグに影をつけてみる
こないだのtableの角を丸める記事(記事はここ)に続いて、今度は影。 影もねぇ ...
Mac OSXでFirefoxを29.0にアップデートしてみた
もう、29.0.1っていうアップデートをしちゃってるんだけど...。 なんかUI ...
html5メモ Excelのウィンドウ枠固定っぽくテーブルの見出しを固定してみる
HTML5標準で対応してくれればいいのに...なんて事言ってても始まらないので、 ...
JavaScriptメモ jQuery IUを使ってinputタグに入力の候補を表示してみる
html5に対応してるブラウザだとJavaScriptを使わなくてもできるんだけ ...
ディスカッション
コメント一覧
まだ、コメントがありません