Wprowadzanie tekstu wewnątrz grupy przycisków radiowych traci ostrość w przeglądarce Firefox po kliknięciu

Question

Mam problem w Firefoksie, jeśli po kliknięciu na <input type="text"> w przeglądarce Firefox, fokus zostanie natychmiast przekierowany do rodzeństwa z przyciskiem Radio.

To zachowanie działa zgodnie z zamierzeniami w Chrome. Czy potrzebuję dodatkowego kodu JavaScript, aby to naprawić?

Answer 1

Wygląda Firefox jest rzeczywiście robi właściwą rzecz, zgodnie z W3C:

Jeśli dla atrybutu nie jest określony, ale element etykieta ma labelable elementu potomka, potem pierwszy taki potomek w drzewie kolejność jest elementem kontrolnym oznaczonym etykietą.

Twoja etykieta owija dwa elementy wejściowe, więc po kliknięciu pola tekstowego, radio (pierwszy taki potomek w kolejności drzewa) otrzymuje fokus.

Wyniki będą zmieniać się w zależności od tego, jak przeglądarka ma realizować tę zasadę, tak aby zapewnić cross-browser wyniki tak, że trzeba JavaScript wkroczyć.

Answer 2

zrobił kilka kopanie wokół i znaleźliśmy ten jsFiddle z jQuery rozwiązanie. Wypalanie trigger.click(); na wejściu radiowym wybierze je po kliknięciu pola tekstowego.

Answer 3

Od MDN:

Dopuszczalna zawartość: zawartość frazowania, ale żadne elementy etykiety potomek. Niedozwolone są elementy umożliwiające etykietowanie inne niż kontrolki oznaczone etykietą.

Zasadniczo, umieszczenie dwóch danych wejściowych w etykiecie nie jest prawidłowym znacznikiem. Zmienić znaczników HTML tak, że etykieta owija tylko wejście radiowe (i każdą etykietę tekstową) ...

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

... a następnie użyć JavaScript (lub w moim przypadku leniwe, jQuery), aby wybrać radio:

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

Here's the fiddle.