單選按鈕組中的文本輸入在Firefox中失去焦點時點擊

Question

我在Firefox中遇到問題，如果您在Firefox中單擊<input type="text">，焦點將立即轉移到單選按鈕同級。

該行爲在Chrome中按預期工作。我需要額外的Javascript來解決這個問題嗎？

Answer 1

好像Firefox是根據實際做正確的事情W3C：

如果對屬性沒有指定，但標籤元素有一個 貼標籤的元素後裔，那麼樹 中的第一個這樣的後代order是標籤元素的標籤控件。

您的標籤包裝了兩個輸入元素，因此當您單擊文本框時，收音機（樹狀順序中的第一個這樣的後代）將獲得焦點。

結果將取決於瀏覽器如何具有實現這個規則各不相同，因此要保證跨瀏覽器的結果是，你需要JavaScript才能介入。

Answer 2

做了一些挖了一圈，發現這個jsFiddle有一個jQuery解。 射擊輸入trigger.click();將在點擊文本框時選中它。

Answer 3

從MDN：

許可內容：段落式內容，但沒有後代標籤要素。 除標籤控制以外，不允許使用可貼標元素。

基本上，在標籤內放入兩個輸入不是有效的標記。改變你的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'); 
}); 

Here's the fiddle。