2009年06月24日

HTML ラジオボタンのonchangeイベントのブラウザごとの挙動について

昔は流行っていたAjaxの技術も、
最近は落ち着いてきたというか、一般的になりすぎて、
あまり騒がれなくなったのかな・・・と思いつつ、

個人的には、Ajaxのような非同期通信を用いたものを
作るのってすごく憧れが強いです。



というより、何か作ってみたくてうずうずしますw
これも技術者の性なんでしょうかねぇ。



今回は、Ajaxとはあまり関係がないかもしれませんが、
ラジオボタンに用いるjavascriptの
onchangeイベントの挙動が、ブラウザによってどうも違うようなので、
解決がてらメモっておきます。


javascriptのonchangeイベント



HTMLのフォーム部品でよく使用されるラジオボタン。
type="radio"ってやつですね。

ふたつセットで使われることが多く、
参考書とかでは、よく下記のようなサンプルを多く見ます。

男性 女性

さらに、フォームを利用する場合、
一緒に使われるのがjavascriptです。



javascriptのイベント関数の中に、
今回注目したいonchengeイベントというものがあります。

これは、例えば、
ラジオボタンを選択した瞬間に、
何かを表示したい、何か効果をつけたい、
と思ったときに利用します。

男性 女性

上記のラジオボタンを選択すると、
選択したと同時に、アラート表示がされると思います。

実際には、選択したときにアラートを表示するよりも、
表示画面を切り替えたりすることが多いと思います。



ブラウザによって異なるonchangeイベントの挙動



さて、このように、
選択したと同時に、
何かアクションを発生することが
可能となるonchangeイベントに魅力を感じますが、

使用するブラウザの環境によっては、
意図しない結果になることがしばしばあります。
CSSのときもそうですが、javascriptでもそうなのです。

特に、このonchangeイベントは、
IEとFirefoxとで挙動が異なります。



まず、IE・・・。
IEの場合は、ラジオボタンを選択したとしても、
何も起こりません。

ボタンを選択して、ページ上のどこかをクリックすると、
アラートが表示されると思います。

これだと、クリックしたと同時に何かが起こってほしいのに、
クリックしても何も起こらない、ということで、
意図しない結果になっていると思います。




対して、Firefoxですと、
クリックしたと同時に、アラートが表示されると思います。
不思議ですねー。



onchangeイベントの代わりとなるonclickイベント



IEとFirefoxで挙動が違うと、
利用してくれるユーザーに対して、
意図した動作を提供できない問題が出てきます。



どうしてもonchangeイベントのようなものを使いたい!
という場合は、代わりとしてonclickイベントを使いましょう。

男性 女性

上記のボタンでは、onchangeイベントではなく、
onclickイベントを用いています。

動作的にはonchangeイベントと
変わりないことがわかると思います。




ブラウザ環境を無視するのであれば、
onchangeイベントでもいいかと思いますが、

無難にonclickイベントを利用されるのをオススメします。




参考サイトさま
IE と FF での挙動の違い --- ラジオボタンの onchange イベント
でぃべろっぱーず・さいど




タグ:javascript AJAX HTML

posted by おちと at 13:41 | Comment(0) | TrackBack(1) | 日記・コラム・つぶやき | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:


この記事へのトラックバック

onchangeとonclickの動作の違いにハマる
Excerpt: javascriptを使って、 「ある操作をしたら表示が切り替わる」 という処理をしたくて、うまく行かずにハマってしまった。 やりたかったのは、申込フォームのような物で、 「同意する」..
Weblog: 水曜以外もどうでしょう
Tracked: 2011-04-08 01:13
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。