Можно ли использовать вход в поле <label>? - PullRequest
Новая
       39

Можно ли использовать вход в поле <label>?

0 голосов
/ 28 апреля 2010

У меня есть несколько необязательных значений для записи для опроса, над которым я работаю.

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

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

Делаем это: 

<input type="radio" id="radiobutton"><label for="radiobutton">Other: <input type="text" id="radiobutton_other"></label>

прекрасно работает в Chrome (и, я полагаю, в других браузерах WebKit), но в Firefox есть странные проблемы с выбором, поэтому я предполагаю, что это нестандартная практика, от которой я должен держаться подальше.

Есть ли способ воспроизвести эту функцию без использования JavaScript? У меня есть функция onclick, которая будет работать, но мы пытаемся сделать наш сайт пригодным для людей, у которых может быть запущен материал типа NoScript.

Ответы [ 2 ]

1 голос
/ 28 апреля 2010

Помещение ввода внутри метки на самом деле имеет немного другое значение. Он не делает сам вход меткой, он неявно связывает метку со входом так же, как если бы они были связаны for / id.

Однако это происходит только в том случае, если метка еще не имеет атрибута for для его переопределения (см. HTML4 s17.9 : «Если он присутствует, значение этого атрибута должно быть одинаковым в качестве значения атрибута id какого-либо другого элемента управления в том же документе. При отсутствии определяемая метка связана с содержимым элемента. »). В соответствии со спецификацией неясно, что должно происходить, когда присутствуют и сдерживание, и for.

(А также это не работает в IE, что делает практический вопрос спорным.)

Нет, для этого вам понадобятся скрипты. 

<input type="radio" id="radiobutton">
<label for="radiobutton_other">Other:</label>
<input type="text" id="radiobutton_other">

<script type="text/javascript">
    var other= document.getElementById('radiobutton_other');
    other.onchange=other.onkeyup= function() {
        if (this.value!=='')
            document.getElementById('radiobutton').checked= true;
    };
</script>
0 голосов
/ 28 апреля 2010

Это (вход внутри метки) проверяет так же хорошо, как HTML 4.01. Одна потенциальная проблема, которую я вижу в вашем коде, состоит в том, что оба радиоэлемента имеют одинаковый идентификатор в вашем примере. Идентификаторы элементов должны быть уникальными в документах HTML и XHTML, и вместо них следует использовать атрибут name для идентификации радиогруппы.

Если после изменения у вас все еще возникают проблемы, вам придется переместить ввод за пределы элемента <label> и использовать сценарии.

...