показать следующий ввод после ввода первого ввода

Question

Вот мой JavaScript:

$('#2').hide();

$("input").keyup(function () {
    var value = $(this).val();
    if($(this).val().match()) {
        $('#2').show();
    } else {
        $('#2').hide();
    }
});

В моем HTML у меня есть 5 входов.Я хочу скрыть все 4 входа, чтобы при вводе значения на входе № 1 отображался пустой ввод № 2, если я вводил значение на вводе № 2, показывал пустой вход № 3 и т. Д. *

Вот демоверсия: http://jsfiddle.net/L7ebh/

Answer 1

Вот оно

http://jsfiddle.net/L7ebh/17/

Поддерживает сокрытие 3,4,5, если вы опустели 2.

realname <input id="1" type="text"/><br> <!-- ID 1 inserted -->
username <input id="2" type="text"/><br>
place  <input id="3" type="text"/><br>
category <input id="4" type="text"/><br>
5+6=<input id="5" type="text"/><br>

$('#2').hide();
$('#3').hide();
$('#4').hide();
$('#5').hide();
max = 5;

$("input").keyup(function () {
    value = $(this).val();   
    id = parseInt($(this).attr('id'));   
    nextid = id + 1;   
    if(value) {
        $('#' + nextid).show().keyup();
    } else {
        for(i = nextid; i <= max; i++){
            $('#' + i).hide();
        }
    }
});

Answer 2

Попробуйте приведенный ниже код - (добавьте id = "1" к первому входу)

$('#2, #3, #4, #5').hide();

$("input").keyup(function () { 
   var value = $(this).val();
   var nextid = $(this).attr("id");
   nextid++;
   if($(this).val().match()) {
     $('#' + nextid).show();
   } else {
     $('#' + nextid).hide();
   }
});

Примечание. Я бы скрыл входные данные, используя display: none с CSS, чтобы они отображались скрытыми, когда страницанагрузки.

Answer 3

Вот то, что вы ищете.Вам понадобится дополнительный CSS, и я делаю довольно большие предположения, основанные на вашей разметке ... или ее отсутствии.

http://jsfiddle.net/L7ebh/16/

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

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

Answer 4

как насчет этого:

http://jsfiddle.net/L7ebh/15/