Question

我在Firefox中遇到问题，如果你点击Firefox中的<input type="text">，焦点会立即转移到单选按钮兄弟。

此行为在Chrome中按预期工作。我需要额外的Javascript来解决这个问题吗？

Here's the JsFiddle

Answer 1

似乎Firefox根据W3C实际上做了正确的事情：

如果未指定for属性，但label元素有 labelable元素后代，然后树中的第一个这样的后代 order是标签元素的标记控件。

您的标签正在包装两个输入元素，因此当您在文本框中单击时，无线电（树顺序中的第一个此类后代）将获得焦点。

结果将根据浏览器实施此规则的方式而有所不同，因此要确保跨浏览器结果是，您需要使用JavaScript才能介入。

Answer 2

来自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

Answer 3

有些人正在寻找并使用jQuery解决方案找到这个jsFiddle。点击文本框时，点击无线电输入上的trigger.click();将选择它。

单击单选按钮组内的文本输入在Firefox中失去焦点

3 个答案: