Поведение автофокуса при использовании нескольких входных элементов в пределах одного <label> только в FireFox

Question

Поведение автофокуса при использовании нескольких входных элементов в пределах одного <label> только в FireFox

0

Ситуация:

У меня есть 5 входов внутри одной ячейки таблицы. 3 ввода типа текста для телефона # части, подключенные к одному скрытому типу ввода "tel". Существует также "select" input для типа телефона. fillNext (id, part, limit) - это функция js, которая заботится о перемещении фокуса в соответствующую часть, как только текущая заполняется. Функция запускается с событием onkeyup. (один раз с "onChange" для автоматически заполняемых случаев). См. входы в ячейки таблицы:

<td>
    <span><!-- to invalidate td>label css rule -->
        <label> <!-- for font size and vertical-alignment -->
            <input name="data[Student][phone_1]" maxlength="3" onkeyup="fillNext(&quot;StudentPhone&quot;,1,3)" type="text" id="StudentPhone1">&nbsp;)&nbsp;
            <input name="data[Student][phone_2]" maxlength="3" onkeyup="fillNext(&quot;StudentPhone&quot;,2,3)" type="text" id="StudentPhone2">&nbsp;-&nbsp;
            <input name="data[Student][phone_3]" maxlength="4" onkeyup="fillNext(&quot;StudentPhone&quot;,3,4)" onchange="fillNext(&quot;StudentPhone&quot;,3,4)" type="text" id="StudentPhone3">&nbsp;&nbsp;&nbsp;&nbsp;
            <select name="data[Student][phone_type]"  id="StudentPhoneType">
                <option value="Cell Phone" selected="selected">Cell Phone</option>
                <option value="Work">Work</option>
                <option value="Home">Home</option>
            </select>
            <input name="data[Student][phone]" style="display:none;" type="tel" id="StudentPhone"> 
        </label>
    </span>
</td>

Проблема:

Код работает отлично и, как ожидается, во всех браузерах, кроме FireFox! В FF он отлично работает только тогда, когда вы нажимаете "tab" для перехода к полям. Однако, если вы "нажмете" на любой из видимых входов, в том числе "выберите", фокус автоматически перейдет к первому элементу (id = "StudentPhone1")!

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

Использование "onChange" или "onClick" или "onKeydown" вместо " onKeyup " не помогло.
Использование типа ввода номера вместо текста для частей телефона не помогло
Продолжайте играть с когда в.focus() элемент не действует.

Есть идеи?

trust_words 22 янв. 2014, в 19:56

Источник

Теги:

javascript

jquery

firefox

cross-browser

onkeyup

2 ответа

1

У вас есть еще одно решение (возможно, не самое лучшее, извините):

добавьте в <input> которые имеют событие keyup второе событие:

onclick=return(false);

Он отменяет действие firefox после нажатия на него ^^

Paulo Roberto 23 янв. 2014, в 17:37

0

Это была одна из вещей, которые я тоже попробовал, но забыл упомянуть ... хотя это не сработало.
trust_words 23 янв. 2014, в 19:14
1

нет, это сработало, я сделал скрипку, чтобы проверить, и это сработало на моем Firefox :)
Paulo Roberto Rosa 23 янв. 2014, в 21:49
0

Ты прав! Благодарю. Однако я нашел реальную причину такого поведения. И я думаю, что избежать этого гораздо проще. Проверьте мой ответ.
trust_words 24 янв. 2014, в 01:54

Показать ещё 1 комментарий

Ещё вопросы

Это была одна из вещей, которые я тоже попробовал, но забыл упомянуть ... хотя это не сработало.
нет, это сработало, я сделал скрипку, чтобы проверить, и это сработало на моем Firefox :)
Ты прав! Благодарю. Однако я нашел реальную причину такого поведения. И я думаю, что избежать этого гораздо проще. Проверьте мой ответ.

trust_words · Accepted Answer · 2014-01-23T18-05-00.000Z

Я решил проблему. Оказывается, проблема возникает из-за наличия входных данных в теге "label". (Я сделал это, чтобы воспользоваться некоторыми правилами CSS для ярлыков вместо создания нового!)

Это не имеет никакого отношения к javaScript или событиям.

удаление метки "label" решило ее. Опять же, это странное поведение имеет только Firefox.