Проверка радиокнопок с помощью «другого» элемента текстового поля - PullRequest
Новая
       33

Проверка радиокнопок с помощью «другого» элемента текстового поля

1 голос
/ 17 ноября 2009

У меня есть HTML-форма с парой переключателей. Первые несколько - обычные радиоприемники, но последний связан с текстовым полем. Я хотел бы запустить некоторую проверку JavaScript, чтобы предупредить пользователей, когда они выбирают «другое», не указывая значение в текстовом поле.

Функциональный HTML + JS приведен ниже, но приблизительная схема HTML: 

<ul>
    <li>
        <input type="radio"/> foo
    </li>
    <li>
        <input type="radio"/> bar
    </li>
    <li>
        <input type="radio"/> other, please specify:
        <input type="text"/> <span class="error">please provide a value</span>
    </li>
</ul>

У меня есть некоторый JavaScript, чтобы сфокусировать текстовое поле, когда установлен флажок Другое, и наоборот.

проблема

Я не могу понять, какие события нужно подключить, чтобы проверка работала так, как мне хотелось бы.

Тестовые случаи У меня проблемы с:

  1. Предупреждение никогда не должно отображаться в этой последовательности действий:
    1. Начните с выбранной радиостанции Foo и без текста в текстовом поле.
    2. Укажите фокус текстового поля (например, щелкните по нему); Другое радио проверяется автоматически.
    3. Выберите радио Foo
  2. Предупреждение должно сначала отображаться при выполнении шага 3:
    1. Начните с выбранного радио Foo и без текста в текстовом поле.
    2. Укажите фокус текстового поля (например, щелкните по нему); Другое радио проверяется автоматически.
    3. Не вводите текстовое поле и продолжайте работу с остальной частью формы (т. Е. Сосредоточьтесь на чем-то другом).

Вещи, которые я пробовал

  1. Проверка по текстовому полю blur (или change ). предупреждение появляется в случае 1, шаг 3. Это происходит потому, что размытие происходит до того, как радиоприемник Foo становится выбранным.

  2. Проверка по событию ul blur : у него его нет.

  3. В текстовое поле blur добавьте обработчик для документа mouseup событие . При наведении мыши подтвердите и удалите обработчик. Это работает, когда потеря фокуса в случае 2, шаг 3, вызвана щелчком мыши в другом месте. Это не работает, когда потеря фокуса вызвана клавиатурой или вкладками вдали от окна. Или когда несколько щелчков мыши перекрываются во времени. Их исправление кажется слишком сложным.

  4. Обработка текстового поля blur и использование setInterval для вызова проверки. Я не могу найти хорошее значение для задержки; слишком короткое означает, что медленный щелчок мыши вызывает мерцание, а слишком длинное означает, что проверка кажется не связанной с действием, вызвавшим размытие.

1 Ответ

0 голосов
/ 18 ноября 2009

А как насчет использования события onmouseout в содержащем li для опции other ? Проблема с использованием этого события заключается в том, что, когда у вас есть вложенные элементы и вы добавляете обработчик события onmouseout к родительскому элементу, браузеры вызывают событие onmouseout , когда указатель мыши наводит курсор на дочерние элементы, но скрипты для решения такого рода проблем.

...