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,オートコンプリート,タグ,テキストボックス,ブラウザ,候補,属性
関連記事
WordPressの自動整形機能をキャンセルしてタグを埋め込むプラグイン ContentEx
Wordpressの自動成形機能をキャンセルしてiframeやらscriptなど ...
JavaScriptメモ jQuery IUを使ってinputタグに入力の候補を表示してみる
html5に対応してるブラウザだとJavaScriptを使わなくてもできるんだけ ...
JavaScriptメモ jQueryを使ってみる
いろいろとあって、JavaScriptでプログラミングする機会あったり。 調べて ...
html5 & css3メモ divタグの角を丸めてみる
数年前?十数年前?は<table>タグでレイアウトの枠を作って、角の ...
Mac OSXでFirefox18にアップデートしてみる
マジクソはえい。 17から2ヶ月切ったな...。 次世代ブラウザ Firefox ...
ディスカッション
コメント一覧
まだ、コメントがありません