Как я могу сделать так, чтобы FireFox НЕ выбирал RadioButton при нажатии на соответствующий TextBox?

Question

У меня есть TextBox, который находится внутри RadioButton's метки.В FireFox (v8.0.1), когда вы щелкаете этот TextBox, он меняет фокус на MouseUp на RadioButton, что означает, что TextBox больше не выбран.

Это создает у пользователей FireFox иллюзию, что TextBox не может быть выделен, даже если вы можете выбрать его, если перейдете на него или дважды щелкните по нему.1009 *

Я пытался использовать jQuery, чтобы остановить это поведение, но мне не повезло, потому что .changed() и .focus() RadioButton не запускаются при выборе TextBox, даже если RadioButton выбран.1013 *

Как сохранить существующее поведение выделения или выбора 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

Я работал с событием .focus() на RadioButton для установки фокуса на TextBox и событием .focus() на TextBox для выбора RadioButton

Теперь корректно работает как для клавиатуры, так и для мыши.

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

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

Answer 3

Если вам нужно сохранить режим выбора или выделения переключателя, используйте что-то вроде этого:

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

Пример