2017年7月11日(火)
<input type="radio">の挙動 #HTML5&CSS3&JavaScript ブラウザの正確さでは、Microsoft EdgeおよびInternet Explorerは、ボロボロである。
HTML5で、フォームのラジオボタンを利用したときの挙動を例に挙げる。
--
<form>
<input type="radio" name="color" value="f" checked>文字色
<input type="radio" name="color" value="b">背景色
</form>
--
Windows10+Chrome、iPhone iOS10.3.2+Safariでは、問題は生じなかった。ページを更新したとき、必ずcheckedが付いている文字色の方が選択される。
【Windows10+IE11の場合】
・背景色を選択した後、［最新の情報に更新］すると、文字色の方にcheckedが入っているにもかかわらず、背景色の方が選択されたままである。まあ、これは許せる。
【Windows10+Edgeの場合】
・背景色を選択した後、［最新の情報に更新］すると、文字色の方にcheckedが入っているにもかかわらず、両方が未選択になる。これは、ダメダメダ～メある。
■対応策
<input type="radio">タグ内のcheckedは、そのままにしておく。
ページを読み込んだ際、JavaScriptで、文字色の方が選択されるようにしておく。
--
<head>
<script>
window.onload = _setup;
function _setup(){
document.forms[0].color[0].checked = true;
}
</script>
</head>
--
とまあ、Webシステムを作るときに、ブラウザの不出来に泣かされ続けている。未だに、この程度の修正もできないのだから、セキュリティホールだらけというのも納得できる。
P.S. 純粋なプログラマーは、動けばいいじゃないかと思っている節があり、繊細なところはあまり問題にしない。
昔、自分がプログラマーにくどくど言うと、「それなら、岩瀬さんが最初から作ればいいじゃないですか」と返され、どちらかと言えばデザイナーである自分が、PHP3を一から勉強して作ったのが、旧NeCoNote [Network Communication Note]である。
自分は、細かい奴である。その気になれば、使い勝手のいいOSだって創れると本当に思っている。
http://neconote.jp/prg/radio.html
お問い合わせ