单击关联的 TextBox 时，如何使 FireFox 不选择 RadioButton？答案

【问题标题】：How can I make FireFox NOT select the RadioButton when an associated TextBox gets clicked?单击关联的 TextBox 时，如何使 FireFox 不选择 RadioButton？
【发布时间】：2012-02-17 23:46:14
【问题描述】：

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

这让 FireFox 用户产生无法选择 TextBox 的错觉，即使您可以通过 Tab 键或双击它来选择它。

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

I have tried using jQuery to stop this behavior, but am not having any luck because the RadioButton's .changed() and .focus() don't get fired when the TextBox gets selected, even though the RadioButton gets selected.

当文本或 TextBox 悬停或单击时，如何保持现有的突出显示或选择 RadioButton 的行为，但使 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>

【问题讨论】：

您的 HTML 输出将比您的 .NET 源代码更有帮助。这一切都发生在客户端，所以显示客户端代码。
您是否尝试过阻止单选按钮的 .click() 事件的默认行为？我认为这将是您单击单选按钮的标签（或标签内的任何内容）时触发的事件。
@itsmequinn 是的，我确实尝试过 event.preventDefault() 和 event.stopPropagation()，但都没有成功

标签： jquery asp.net firefox

【解决方案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>

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

【讨论】：

但是当文本或文本框悬停或单击时，我失去了 RadioButton 突出显示或选中的默认行为
然后在文本框中添加一个onclick事件来检查单选按钮。你不能同时拥有它。
我找到了一个可行的解决方案并将其发布为答案。我同意嵌套标签是个坏主意，但我不确定如何在没有大量额外工作的情况下获得我想要的东西，因为这可行，我将继续使用它:)

【解决方案2】：

如果您需要保持选择或突出显示单选按钮的行为，请使用类似的东西：

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

Example

【讨论】：

这仅适用于鼠标点击，而不适用于键盘事件，例如切换到控件。另外，我尝试了.preventDefault() 和.stopPropagation() 都没有工作。

【解决方案3】：

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

现在键盘和鼠标导航都可以正常工作

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

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

【讨论】：