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

Question

我有一个单选按钮组和带有for属性的相关标签，其中一个标签包含一个文本框。

现在我遇到了问题，只要单击textbox，焦点就会再次移除。请参见这里 -尝试选择文本框以输入某些内容。

我已经在onclick或onfocus中尝试了以下内容

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

这似乎是可行的，但我在该控件上有一个datetimepicker，这“扼杀”了这个逻辑，因为它一直在显示(参见这里，但这个小提琴只适用于Chrome)。

，有人能帮我吗？

Answer 1

这个问题是因为标签的for属性设置为同级元素。这意味着将在属性中命名的元素上引发单击事件，因此，为什么会立即从textbox中丢失焦点。删除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>

例琴

如果您需要这样的行为:当有人单击文本框时，选中单选按钮，则需要手动执行：

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

另一个例子小提琴

Answer 2

您已经将输入文本框包装在标签标签下，标签标签属于单选按钮。只需结束标签标签，如下面所示，您的问题就会解决。

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