携帯電話の特定のキャリアではおかしくなる例
またまた時間が空いてしまいました。
お久しぶりです。
のびーにょです。
さて、表題の件
ラジオボタンがまともに動作しない場合
ドコモ、ソフトバンクの2キャリアでは正常に動作します。
また、PC等の一般的なブラウザでも正常に動作します。
しかし、ａｕのみ正常に動作しません。
以下サンプル
html
<form action="http://example.com" method="POST"> <input type="hidden" name="jb" value="test2_ez"/> <input type="radio" name="mail_receive" value="ALL"/>ALL<br /> <input type="radio" name="mail_receive" value="YES" checked/>YES<br /> <select name="s_hour"> <option value="00">00</option> <option value="01">01</option> </select> <br /> <input type="radio" name="mail_receive" value="NO"/>NO<br /> <div style="text-align:center;"> <input type="submit" name="regist" value="設定する" /><br /> </div> </form>
以下のような表示になります。
複数個のラジオボタンがあってセレクトボックスがある普通のフォームです。
ラジオボタンのグループはすべて同じグループです。
au以外の端末の場合は正常に動作しますが、
auの一部の機種(かなり多そうな感じではありますが)では正常に動作しません。
以下の画像のようになります。
ラジオボタンが複数個選択できてしまいます。
ALLとNOの2個のラジオボタンにチェックが入ってしまう状態です。
もう一度言いますが、グループは同一です。
これでPOSTしてしまうとセレクトボックスの下側(NOの方)が優先されてしまい、
上にあるALL、YESが2度と選択できなくなります。
解決方法は以下のhtml
<form action="http://example.com" method="POST"> <input type="hidden" name="jb" value="test2_ez"/> <input type="radio" name="mail_receive" value="NO"/>NO<br /> <input type="radio" name="mail_receive" value="ALL"/>ALL<br /> <input type="radio" name="mail_receive" value="YES" checked/>YES<br /> <select name="s_hour"> <option value="00">00</option> <option value="01">01</option> </select> <br /> <div style="text-align:center;"> <input type="submit" name="regist" value="設定する" /><br /> </div> </form>
ラジオボタンを一か所にまとめてしまい、間にセレクトボックスを挟まないようにします。
HTMLファイルを同一にて記述する場合や、1キャリアのソースをコンバートする場合は注意が必要です。
ドコモの端末で動くからOKとかは危険なので気を付けてください。
セレクトボックスを指定したのにラジオボタンになる
以下のようなHTMLはauでは
次のページにすらいけなくなるので注意が必要です。
＜div style="text-align:center;"> <form action="http://example.com" method="POST"> ＜/div> <input type="hidden" name="jb" value="test2_ez"/> <select name="s_hour"> <option value="00">00</option> <option value="01">01</option> </select> <div style="text-align:center;"> <input type="submit" name="regist" value="設定する" /><br /> </div> </form>
※意図的に上段のdivの＜を大文字にしています。
syntaxHighlighterが勝手にformを補完するようなので。。。
HTML的にどうなんだという部分はありますが、このHTMLでも
PCのブラウザやDoCoMo,SoftBankの携帯端末だとまともに表示され、POST,GETが可能です。
普通にこう見えます。
しかしやはりEzWeb ここでもやってくれます。
以下の画像や
こんなことになります。
この状態だとどのボタンを押しても前の画面に戻ります。
次のページへ移動はできません。
解決方法は以下
<form action="http://example.com" method="POST"> <input type="hidden" name="jb" value="test2_ez"/> <select name="s_hour"> <option value="00">00</option> <option value="01">01</option> </select> <div style="text-align:center;"> <input type="submit" name="regist" value="設定する" /><br /> </div> </form>
まぁ、divの指定が悪いのは見ての通りなので消してやるか、formすべてを囲ってやればOK
最近HTMLの話ばかりでプログラムに関することはほぼ書いてない気がします。
というか、投稿の間隔が空きすぎていますね・・・
なるべく書くようにします。。。
