札幌Web制作のシンクグラフィカ

label内にラジオボタンとテキストフォームを同梱するとブラウザによって動作が違う

なおゆさん (2013-06-06 00:03:19) なし

Mailform Pro 4.0.9でご質問があります。
下記の様に、1つのlabelタグ内に、ラジオボタンとテキストフォームを同梱させ、テキストフォームにフォーカスすると、ラジオボタンにもチェックが入るようにHTMLを書きました。
■ソース
<label><input type="radio" name="理由" value="その他" /> その他 <input type="text" name="理由" size="50" /></label>
■テキストフォームにフォーカスすると。。。
Chrome最新版では、思った通りに動きました。
IE全般(10含む)ではラジオボタンにはチェックが入りませんでした。
Firefox最新版では、ラジオボタンにも同時にチェックが入るものの、テキストフォームへのフォーカスが外れてしまい入力できない。ただし、ダブルクリックすると入力できるようになることが判明。。
IEとFFともに、Chromeと同じ動作できますでしょうか?

label内にラジオボタンとテキストフォームを同梱するとブラウザによって動作が違う

なおゆさん (2013-06-06 00:18:17) http://naoyu.net/test/

Mailform Pro 4.0.9でご質問があります。
下記の様に、1つのlabelタグ内に、ラジオボタンとテキストフォームを同梱させ、テキストフォームにフォーカスすると、ラジオボタンにもチェックが入るようにHTMLを書きました。
■ソース
<label><input type="radio" name="理由" value="その他" /> その他 <input type="text" name="理由" size="50" /></label>
■テキストフォームにフォーカスすると。。。
Chrome最新版では、思った通りに動きました。
IE全般(10含む)ではラジオボタンにはチェックが入りませんでした。
Firefox最新版では、ラジオボタンにも同時にチェックが入るものの、テキストフォームへのフォーカスが外れてしまい入力できない。ただし、ダブルクリックすると入力できるようになることが判明。。
IEとFFともに、Chromeと同じ動作できるようになりますでしょうか?

Re:label内にラジオボタンとテキストフォームを同梱するとブラウザによって動作が違う

和田 (2013-06-15 18:35:38) www.synck.com

基本的にlabelの使い方が適切ではないため仕方ないのではないでしょうか。
labelはinputと対になるものなので、複数の入力フォームをまとめるようなものではありません。
もしどうしても同様の挙動を実現したい場合はonfocusを利用してjavascriptで実装するしかないのではないかなと。