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

Question

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

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

这是 JsFiddle

Answer 1

来自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');
});

这是小提琴。

Answer 2

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

如果未指定 for 属性，但 label 元素具有可标记元素后代，则按树顺序排列的第一个此类后代是 label 元素的带标签控件。

您的标签包含两个输入元素，因此当您单击文本框时，收音机（按树顺序排列的第一个此类后代）会获得焦点。

结果会因浏览器实现此规则的方式而异，因此要确保跨浏览器结果是的，您需要 JavaScript 介入。

Answer 3

做了一些挖掘，发现这个带有 jQ​​uery 解决方案的jsFiddle。trigger.click();单击文本框时，在无线电输入上触发将选择它。