TabIndex в динамической форме (элементы отображаются в зависимости от регистра)

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

Тем не менее, когда форма введена через <Tab> ключ (<Tab> ключ-> введите значение-><Tab> ключ), он не переходит к вновь появившемуся полю, а к тому, которое было ранее видимым.

Ниже приведен упрощенный пример. Если вы напишите что-нибудь в поле с номером 1, будет инициировано событие изменения, и будет показан вход со значением 2, но не следующий, на котором следует сосредоточиться.

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<form>
    <input id="input1" value="1" tabindex="1" onchange="$('#input2').show()">
    <input id="input2" value="2" tabindex="2" style="display: none;">
    <input id="input3" value="3" tabindex="3" onchange="$('#input4').show()">
    <input id="input4" value="4" tabindex="4" style="display: none;">
    <input id="input5" value="5" tabindex="5">
    <input id="input6" value="6" tabindex="6">
</form>

Из-за его сложности, я не хотел бы играть с прямым контролем над <Tab> ключ. Кроме того, я не могу использовать onchange="$('#input2').show();$('#input2').focus()" поскольку тот же код используется и в тех случаях, когда он не является ближайшим следующим элементом. Есть ли способы решить эту проблему?

Заранее спасибо за любые комментарии / предложения.

Источник

1 ответ

Решение

Нажмите здесь для рабочего решения на jsFiddle.

я использовал нажатие клавиш, чтобы сделать эту работу.

в этом примере вы можете перемещаться вперед и назад через текстовые поля 1, 3 и 5, а затем изменить значение текстового поля 1, которое показывает текстовое поле 2; Затем вы можете перейти к текстовым полям 2, 3 и 5 - и так далее.

Надеюсь, я правильно понял вашу задачу и это полезно. веселит.

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">
      $(document).ready(function() {
        $("input").live("keypress", function() {
          $(this).next().show()
        })
      })
    </script>

    <style type="text/css">
      .hidden {
        display:none;
      }
    </style>
</head>
<body>
<form>
    <input id="input1" value="1">
    <input id="input2" value="2" class="hidden">
    <input id="input3" value="3">
    <input id="input4" value="4" class="hidden">
    <input id="input5" value="5">
    <input id="input6" value="6" class="hidden">
</form>
</body>
</html>
Источник
Другие вопросы по тегам