11

Firefox で問題が発生しています。Firefox で をクリックする<input type="text">と、フォーカスがすぐにラジオ ボタンの兄弟に移動します。

動作は Chrome で意図したとおりに機能します。これを修正するには、追加の Javascript が必要ですか?

ここにJsFiddleがあります

4

3 に答える 3

6

MDNから:

許可されているコンテンツ:フレージング コンテンツ。ただし、子孫のラベル要素は含まれていません。ラベル付きコントロール以外のラベル付け可能な要素は許可されません。

基本的に、ラベル内に 2 つの入力を配置することは有効なマークアップではありません。ラベルがラジオ入力 (および任意のテキスト ラベル) のみをラップするように、html マークアップを変更します...

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

...次に、javascript (または私の怠惰なケースでは jQuery) を使用してラジオを選択します。

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

これがフィドルです。

于 2013-05-13T10:21:45.677 に答える
6

W3Cによると、Firefox は実際に正しいことを行っているようです。

for 属性が指定されていないが、label 要素に labelable 要素の子孫がある場合、ツリー オーダーで最初の子孫が label 要素のラベル付きコントロールになります。

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

結果は、ブラウザがこのルールをどのように実装しているかによって異なります。そのため、クロスブラウザの結果が「はい」であることを確認するには、JavaScript が介入する必要があります。

于 2013-03-06T17:13:26.373 に答える
0

掘り下げて、jQueryソリューションでこのjsFiddleを見つけました。trigger.click();ラジオ入力で発射すると、テキストボックスをクリックしたときに選択されます。

于 2013-03-06T19:18:31.133 に答える