Question

我想创建一个poll脚本，并且需要在已存在的最后一个输入具有值时添加输入。因此，如果有人要在第二个输入中输入内容，则会出现第三个输入，如果在第三个输入中输入了第四个输入，依此类推。

以下是输入：

<input autocomplete="off" class="animated fadeInUp normal" type="text" name="option[]" placeholder="Your Option 1" required />
<input autocomplete="off" class="animated fadeInUp normal" type="text" name="option[]" placeholder="Your Option 2" required />

我也加载了jQuery，所以这可能就是这样做的。

我希望这是可以理解的...... 感谢。

Answer 1

$(document).on('input', 'input', function() {
    if ( $('input:last').get(0) === this && this.value.length ) {
        $('body').append( $('<input />', {
            type: 'text',
            'class' : 'animated fadeInUp normal',
            placeholder : 'Your Option ' + ($('input').length + 1)
        }) );
    }
});

FIDDLE

Answer 2

HTML

<div id='input-container'>
    <input type='text'>
</div>

JS

var container = $('#input-container').on('click', 'input:last', function(){
   container.append('<input type="text">');
})

您可以尝试使用其他活动。例如.on('input'...)

以下是example

Answer 3

这是 FIDDLE

i = 3;
$(document).on('change','.normal', function() {
  if($(this).val() !== '' && $(this).next('.normal').length < 1) {
     $(this).after('<input autocomplete="off" class="animated fadeInUp normal" type="text" name="option[]" placeholder="Your Option '+ i++ +'" required />');
  }
});

或略有改进

i = 3;
$(document).on('change','.normal', function() {
  // Add inputs and limit their number
  if($(this).val() !== '' && $('.normal').length < 5 && $(this).next('.normal').length < 1) {
     $(this).after('<input autocomplete="off" class="animated fadeInUp normal" type="text" name="option[]" placeholder="Your Option '+ i++ +'" required />');
  }
  // Add Submit button after last input
  if($('.normal').length === 5 && $('.submit').length === 0) {
     $('.normal:nth-child('+$('.normal').length+')').after('<input type="submit" name="submit" class="submit" value="Submit" />');
  }
});

如果上一个输入存在具有值（Javascript，jQuery和HTML），则添加输入

3 个答案: