HTML5 の仕様の実現において、ブラウザによって振る舞いが違う事を最初に考慮すべきです。機能によっては、全く実装されていないブラウザもあるので、その場合は jQuery のプラグイン等を使用して同等の機能を実現する必要があります。
datalist をテストした、Chrome と Firefox と IE11 では、どれも実装されていましたが、表示や振る舞いに違いがあります。また、ここでは datalist 実装で想定される場合の入力フォームでの構成に便利であると思われる fieldset を使用して入力項目のグループ化を行っています。
fieldset のみでは、表示に支障があるので、いくつかの CSS を指定していますが、border-radius に関して、IE11 が動作しない事を確認しました。
Chrome
カーソルが over で無い場合には表示されませんが、カーソルが上に来ると、コンボボックスのようなコントロールが表示されて候補を開く事ができます
Firefox
フィールド内で下矢印を使用するか、フィールド内でマウスをクリックするかで候補を表示させます
IE11
フォーカスを得ると、候補が表示されます。
<style>
fieldset {
padding: 20px;
border:1px solid #606060;
border-radius: 12px;
width: 300px;
margin-bottom: 10px;
}
</style>
<form
id="myform"
action="http://winofsql.jp/php_get.php"
target="myframe_datalist"
accept-charset="utf-8">
<fieldset>
<legend>趣味</legend>
<input
type="text"
id="mydata1"
name="mydata1"
list="hobby">
<datalist id="hobby">
<option value="読書">
<option value="音楽">
<option value="運動">
</datalist>
</fieldset>
<fieldset>
<legend>好きな食べ物</legend>
<input
type="text"
id="mydata2"
name="mydata2"
list="food">
<datalist id="food">
<option value="寿司">
<option value="ラーメン">
<option value="カレーライス">
</datalist>
</fieldset>
<input type="submit" name="send" value="送信">
</form>
<iframe
name="myframe_datalist"
frameborder="1"
scrolling="yes"
width="100%" height="100"
style="margin-top:10px;">
</iframe>
posted by
at 2016-07-05 14:34
|
HTML
|

|