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で実装したりする必要があるみたい。
ま、メモってことで。
[amazonjs asin="4883378152″ locale="JP" title="HTML5 & CSS3ステップアップブック"]
プログラミングautocomplete,datalist,HTML5,iD,IE10,IE6,IE8,IE9,input,Internet Explorer,JavaScript,jQuery,List,option,オートコンプリート,タグ,テキストボックス,ブラウザ,候補,属性
関連記事
Firefox OSメモ 簡単なアプリを作ってFirefox OS Simulatorで動かしてみる
Firefox OS Simulatorでなら、結構ちょちょいとアプリを動かすこ ...
JavaScriptメモ jQueryを使ってみる
いろいろとあって、JavaScriptでプログラミングする機会あったり。 調べて ...
html5メモ fieldsetタグでinputタグをまとめてみる
野暮用で似たようなことをしようとしたんだけど、html5で試してみる。 html ...
Mac OSXでFirefox18にアップデートしてみる
マジクソはえい。 17から2ヶ月切ったな...。 次世代ブラウザ Firefox ...
Mac OSXでFirefox19にアップデートしてみる
また、バージョンアップ。 アドオンって、頻繁なバージョンアップについていけてるん ...
ディスカッション
コメント一覧
まだ、コメントがありません