Ввод текста внутри группы переключателей теряет фокус в Firefox при нажатии

У меня проблема в Firefox, где, если вы нажмете <input type="text"> в Firefox, фокус будет немедленно перенаправлен на родной радиоприемник.

Поведение работает в Chrome. Нужен ли мне дополнительный Javascript, чтобы исправить это?

Здесь JsFiddle

Ответы

Ответ 1

Похоже, что Firefox действительно делает правильную вещь в соответствии с W3C:

Если атрибут for не указан, но элемент метки имеет наследуемый элемент потомка, затем первый такой потомок в дереве порядок - это элемент с меткой, помеченный значком.

Ваша метка обертывает два входных элемента, поэтому, когда вы нажимаете в текстовом поле, радио (первый такой потомок в древовидном порядке) получает фокус.

Результаты будут зависеть от того, как браузер реализует это правило, поэтому для обеспечения результатов кросс-браузера да, вам потребуется JavaScript для входа.

Ответ 2

От MDN:

Допустимый контент: Фразинг контента, но не элементы метки потомков. Не допускается маркировка элементов, кроме отмеченного элемента управления.

В принципе, размещение двух входов внутри метки не является допустимой разметкой. Измените свою разметку html так, чтобы метка только обертывала радиовход (и любую текстовую метку)...

<label class="radio">
    <input type="radio" name="requestfor" id="optionsRadios2" value="someoneelse" />
    Behalf of
</label>      
<input type="text" name="behalfof" id="behalfid"/>

... а затем используйте javascript (или в моем ленивом случае, jQuery), чтобы выбрать радио:

$('#behalfid').click(function(){
    $('#optionsRadios2').trigger('click');
});

Здесь скрипка.

Ответ 3

Немного рылся и нашел это jsFiddle с помощью решения jQuery. Стрельба trigger.click(); на радиовходе будет выбирать его при нажатии на текстовое поле.