CODEWITHSUNDEEP
jqueryasp.netfirefox
Rachel
Rachel

Reputation: 132618

How can I make FireFox NOT select the RadioButton when an associated TextBox gets clicked?

I have a TextBox that is inside of a RadioButton's label. In FireFox (v8.0.1), when you click this TextBox it changes focus on MouseUp to the RadioButton, which means the TextBox is no longer selected.

This is giving FireFox users the illusion that the TextBox cannot get selected, even though you can select it if you tab to it or double-click it.

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

enter image description here

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.

How can I keep the existing behavior of highlighting or selecting the RadioButton when the text or TextBox gets hovered over or clicked, but make the TextBox keep it's focus when it gets selected?

Edit

HTML output as requested:

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

Upvotes: 1

Views: 748

Answers (3)

Rachel
Rachel

Reputation: 132618

I got it working with a .focus() event on the RadioButton to set focus to the TextBox, and a .focus() event on the TextBox to select the RadioButton

It now works correctly for both keyboard and mouse navigation

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

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

Upvotes: 0

Artem
Artem

Reputation: 3700

If you need to keep behavior of selecting or highlighting radio button, use something like that:

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

Example

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

Delete the "for" attribute in the first label:

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

I don't think nesting labels is a good idea.

Upvotes: 1

Related Questions