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,オートコンプリート,タグ,テキストボックス,ブラウザ,候補,属性
関連記事
JavaScriptメモ jQuery IUを使ってinputタグに入力の候補を表示してみる
html5に対応してるブラウザだとJavaScriptを使わなくてもできるんだけ ...
HT-03Aと既存端末の併用
2010年4月からパケ・ホーダイとBiz・ホーダイが1つのプランになるそうな。 ...
html5メモ fieldsetタグでinputタグをまとめてみる
野暮用で似たようなことをしようとしたんだけど、html5で試してみる。 html ...
Mac OSXでFirefox OS Simulatorを動かしてみる
てっきり、Firefox OSをVirtual Boxとかにインストールして動か ...
Mac OS Xでいまさらながら “Internet Explorer”を使ってみる
JavaScriptを使っていろいろ試してると、今はメジャーなInternet ...
ディスカッション
コメント一覧
まだ、コメントがありません