ラジオボタングループ内のテキスト入力がクリックされたときにFirefoxでフォーカスが失われる

Question

Firefoxで<input type="text">をクリックすると、ラジオボタンの兄弟にフォーカスが集中します。

この動作は、Chromeで意図したとおりに動作します。これを修正するために余分なJavascriptが必要ですか？

Answer 1

Firefoxが実際にW3Cに応じて、正しいことをやっているように思える：

を属性に、その後、指定されたが、label要素が 標識可能な要素の子孫を持っていない場合木の最初の子孫 orderはラベル要素のラベル付きコントロールです。

ラベルは2つの入力要素を折り返しているため、テキストボックスをクリックするとラジオ（最初の子孫）がフォーカスを受け取ります。

結果はそれほどクロスブラウザがYESの結果を保証するために、ブラウザがこのルールを実装しているかによって異なります、あなたはにステップするためにJavaScriptを必要があると思います。

Answer 2

をしたいくつかの周りに掘りとjQueryを使って、このjsFiddleを見つけました溶液。 ラジオ入力でtrigger.click();を発射すると、テキストボックスをクリックするとそれが選択されます。

Answer 3

MDNから

：

許可内容：フレージング内容、ない子孫ラベル要素。 ラベル付きコントロール以外のラベル可能な要素は使用できません。

基本的に、ラベル内に2つの入力を入れることは有効なマークアップではありません。ラベルはラジオだけ入力（および任意のテキストラベル）を包むように

...

<label class="radio"> 
    <input type="radio" name="requestfor" id="optionsRadios2" value="someoneelse" /> 
    Behalf of 
</label>  
<input type="text" name="behalfof" id="behalfid"/> 

あなたのHTMLマークアップを変更...そしてラジオを選択する（または私の怠惰な場合、jQueryのでは）JavaScriptを使用します。

$('#behalfid').click(function(){ 
    $('#optionsRadios2').trigger('click'); 
}); 

Here's the fiddle。