2014年09月18日

input 要素に対して値変更可能なコンボボックスにする HTML5 の list 属性

結論から言うと、Google Chrome と Firefox と IE11 でこの機能が使用できます。さらに、pattern 属性と併用して、入力する値にも制限を加える事ができます。

これだけで十分に有用で、WEB アプリケーションで今まで欲しかった機能( JavaScript で実装していた機能 )が誰でも input に datalist 属性の中にセットした コンボボックスで今まで利用して来た仕様と同じ option セットを関係付けるだけで利用可能になります。

Google Chtome

Google Chrome はとても優秀です。Google Chrome のみ完全にコンボボックスと同等の機能を有しており、value と text を同時表示する機能に加え、pattern で指定した文字に該当しない場合は、一覧から排除してくれます。( pattern そのものの検査 は、Firefox と IE11 でも機能しています。排除してくれるのは Chrome のみです )



これには本当に驚きで、総じて HTML5 における input 要素の拡張に関しては全てにおいて一歩先を行っています。

Firefox

Firefox のこの機能は微妙です。実装にあたって、入力の履歴と同じリソースを使って実現しているので、過去の入力値と、リストが同時に表示されるという不便な状況になっており、削除するにはキャッシュの削除と同等の手間が必要です。



IE11

IE11 は、Firefox に比べてかなりマシです。空の場合のみクリックすると、常にリストが表示されて選択可能ですが、値が入っている場合は、やはりリストが出ないので修正時の意味がありません。

ただ、Firefox に比べ、値がある場合は x のクリアコントロールが表示されるので、ひと手間楽です。




▼ 実際の実行



<datalist id="kansai1">
<option value="1">大阪</option>
<option value="2">京都</option>
<option value="3">兵庫</option>
<option value="4">滋賀</option>
<option value="5">奈良</option>
<option value="6">和歌山</option>
</datalist>
<datalist id="kansai2">
<option value="1"></option>
<option value="2"></option>
<option value="3"></option>
<option value="4"></option>
<option value="5"></option>
<option value="6"></option>
</datalist>
<datalist id="kansai3">
<option value="大阪"></option>
<option value="京都"></option>
<option value="兵庫"></option>
<option value="滋賀"></option>
<option value="奈良"></option>
<option value="和歌山"></option>
</datalist>

<form action="http://winofsql.jp/php_get.php"
	target="my_frame"
	accept-charset="utf-8">
	<input type="text"
		list="kansai1"
		pattern="^[1-5]+$"
		name="userid1">
	<br>
	<input type="text"
		pattern="^[1-5]+$"
		list="kansai2"
		name="userid2">
	<br>
	<input type="text"
		list="kansai3"
		name="userid3">
	<input type="submit"
		name="send"
		value="送信">
</form>
<iframe name="my_frame"
	frameborder="1"
	scrolling="yes"
	width="400"
	height="100" >
</iframe>

関連する記事

使いどころが難しいですが、入力をコンボボックス化する jQuery プラグインの実装が不便だったので、modify しました。





posted by at 2014-09-18 16:31 | HTML | このブログの読者になる | 更新情報をチェックする