<label for><input /><label> - 焦点立即丢失答案

【问题标题】：<label for><input /><label> - focus immediately lost<label for><input /><label> - 焦点立即丢失
【发布时间】：2014-08-04 07:35:55
【问题描述】：

我有一个单选按钮组，其中包含单选按钮和具有for 属性的关联标签，其中一个标签包含一个文本框。
我现在遇到的问题是，一旦我单击文本框，焦点就会再次被移除。请参阅HERE - 尝试选择文本框输入内容。

我已经在onclick 或onfocus 中尝试了以下方法：

setInterval(function () { $('#TriggerTimeUI').focus(); }, 50)

这似乎可行，但我在那个控件上有一个datetimepicker，这就是“杀死”这个逻辑，因为它一直显示出来（见HERE，但这个小提琴只适用于Chrome）.. .

有人可以帮我解决这个问题吗？

【问题讨论】：

为什么标签内有一个文本框用于不同的元素？单击标签会导致焦点设置到 for 元素。
文本框位于带有“for”属性的标签内。它使 id 为“TriggerMode_custom”的元素成为焦点，文档中的第一个 id 将被考虑在内，因此单选按钮被聚焦。

标签： jquery html radio-button focus

【解决方案1】：

问题是因为您将标签的for 属性设置为兄弟元素。这意味着将在属性中命名的元素上引发单击事件，因此为什么焦点会立即从文本框中丢失。删除for 属性，文本框保持焦点：

<input type="radio" name="TriggerMode" id="TriggerMode_custom" value="custom" checked="checked" />
<label> <!-- remove the 'for' here -->
    <input style="width: 230px;" type="Text" id="TriggerTimeUI" />
    <br />
</label>

Example fiddle

如果您需要在有人单击文本框时选择单选按钮的行为，则需要手动执行此操作：

$('#TriggerTimeUI').focus(function() {
    $('#TriggerMode_custom').prop('checked', true);
});

Another example fiddle

【讨论】：

【解决方案2】：

您已将输入文本框包裹在属于单选按钮的标签标签下。只需像下面这样结束标签标签，您的问题就会解决

<label for="TriggerMode_custom"></label>
        <input style="width: 230px;" type="Text" id="TriggerTimeUI" /><br />

【讨论】：