如何在单击关联的TextBox时使FireFox NOT选择单选按钮？

Question

我有一个TextBox标签内的RadioButton's。在FireFox（v8.0.1）中，当您单击此TextBox时，它会将MouseUp的焦点更改为RadioButton，这意味着不再选择TextBox。

这给FireFox用户一种幻觉，即TextBox无法被选中，即使您可以选择它，也可以选中它或双击它。

<asp:RadioButton runat="server" GroupName="PaymentAmount" ID="rbAmount_Other" />
<asp:Label runat="server" AssociatedControlID="rbAmount_Other">
    Some Text
    <asp:TextBox runat="server" ID="txtOtherAmount" CssClass="money-text" />
    Some other Text
</asp:Label>

我尝试使用jQuery来阻止这种行为，但我没有运气，因为RadioButton的.changed()和.focus()在选中TextBox时不会被触发，即使RadioButton被选中

当文本或TextBox被悬停或单击时，如何保持突出显示或选择RadioButton的现有行为，但是当TextBox被选中时，让TextBox保持焦点？

修改

按要求输出HTML：

<input id="ctl00_cphPageContent_rbAmount_Other" type="radio" name="ctl00$cphPageContent$PaymentAmount" value="rbAmount_Other" />
<label for="ctl00_cphPageContent_rbAmount_Other">
    <label>Pay other amount</label>
    <input name="ctl00$cphPageContent$txtOtherAmount" type="text" id="ctl00_cphPageContent_txtOtherAmount" class="money-text" />
    <div class="align-with-radiobutton small-text">
        The minimum amount for web payments is
        <span id="ctl00_cphPageContent_lblMinPayment">$20.00</span>. If you are looking to pay a lower
        amount, please <a href="Contact.aspx">contact us</a> and speak with a representative.
    </div>
</label>

Answer 1

删除第一个标签中的“for”属性：

<input id="ctl00_cphPageContent_rbAmount_Other" type="radio" name="ctl00$cphPageContent$PaymentAmount" value="rbAmount_Other" />
<label for=""><label for="ctl00_cphPageContent_rbAmount_Other">Pay other amount</label><input name="ctl00$cphPageContent$txtOtherAmount" type="text" id="ctl00_cphPageContent_txtOtherAmount" class="money-text" AssociatedControlId="txtOtherAmount" />
    <div class="align-with-radiobutton small-text">
        The minimum amount for web payments is
        <span id="ctl00_cphPageContent_lblMinPayment">$20.00</span>. If you are looking to pay a lower
        amount, please <a href="Contact.aspx">contact us</a> and speak with a representative.
    </div>
</label>

我认为嵌套标签不是一个好主意。

Answer 2

如果您需要保持选择或突出显示单选按钮的行为，请使用以下内容：

$(function() {
    $("#ctl00_cphPageContent_txtOtherAmount").click(function(e) {
        e.preventDefault();
        $("#ctl00_cphPageContent_rbAmount_Other").click();
    });
})

Example

Answer 3

我使用.focus()上的RadioButton事件将焦点设置为TextBox，并.focus()上的TextBox事件进行选择RadioButton

它现在可以正常用于键盘和鼠标导航

$('#<%= txtOtherAmount.ClientId %>').focus(function () {
    $('#<%= rbAmount_Other.ClientId %>').prop('checked', true);
});

$('#<%= rbAmount_Other.ClientId %>').focus(function () {
    $('#<%= txtOtherAmount.ClientId %>').focus();
});