L'immissione di testo all'interno del gruppo di pulsanti di opzione perde il focus in Firefox quando si fa clic su

Question

Ho un problema in Firefox, dove se si fa clic su <input type="text"> in Firefox, lo stato attivo viene immediatamente deviato al fratello di pulsante Radio.

Il comportamento funziona come previsto in Chrome. Ho bisogno di Javascript in più per risolvere il problema?

Answer 1

Sembra come Firefox è in realtà facendo la cosa giusta in base al W3C:

Se l'attributo for non è specificato, ma l'elemento etichetta ha un elemento etichettabili discendente , poi la prima tale discendente nell'albero l'ordine è il controllo etichettato dell'elemento dell'etichetta.

L'etichetta contiene due elementi di input, quindi quando si fa clic nella casella di testo, la radio (la prima di tali discendenti nell'ordine degli alberi) riceve lo stato attivo.

I risultati variano a seconda di come il browser deve implementare questa regola, in modo da garantire risultati cross-browser sì, avresti bisogno Javascript per intervenire.

Answer 2

Ha fatto un po 'scavare intorno e ho trovato questo jsFiddle con jQuery soluzione. L'accensione trigger.click(); sull'ingresso radio selezionerà quando si fa clic sulla casella di testo.

Answer 3

Da MDN:

contenuti consentiti: contenuti fraseggio, ma non elementi dell'etichetta discendente. Non sono ammessi elementi etichettabili diversi dal controllo con etichetta.

In pratica, inserire due input in un'etichetta non è un markup valido. Cambia la tua markup HTML in modo che l'etichetta avvolge solo l'ingresso radio (e qualsiasi etichetta di testo) ...

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

... e quindi utilizzare javascript (o nel mio caso pigro, jQuery) per selezionare la radio:

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

Here's the fiddle.