Question

我使用jquery并希望每个表单文本输入逐个出现，用户输入数据然后出现下一个。在他们完成单个问题段的整个表格后，我希望提交整个表格的回复。

这可能吗？或者我是否必须使表单完整显示以获得我想要的结果？

提前致谢。

Answer 1

哇，每个人都比我快，好吧，我把手伸进锅里：

This jsFiddle向您展示了我提出的实施方案。它显示了如何基本遍历表单以获取下一个容器，并在输入键（13）被命中时显示它。

不要忘记stopPropagation / preventDefault，否则当输入键被击中时，你最终会提交表单。

当项目是调用$（this）的最终元素时，您可以添加例外.parents（＆＃34; form＆＃34;）。submit（）;而不是试图找到下一个元素并显示它。

Answer 2

使用锚点触发新输入

$(document).on('click','a.more-inputs',function(){
    $lastInput = $(this).prev('input[type="text"]'); //anchor should be next element of present input otherwise use a different selector input.one-more:last-child or so
    if($lastInput.val() && $lastInput){
        $(this).before($lastInput.clone().val(''));//anchor should be where last comment says or else use different code
        }
    else{
        $lastInput.focus();
        }
    return false;
    });

带填充输入的模糊事件触发新输入

$(document).on('blur','input[type="text"].one-more',function(){
    $lastInput = $(this);
    if($lastInput.val() && $lastInput){
        $(this).after($lastInput.clone().val(''));
        }
    else{
        $lastInput.focus(); //fill this before getting next one
        }
    return false;
    });

使用回车键按下当前输入触发新输入

$(document).on('keypress','input[type="text"].one-more',function(e){
    if(e.keyCode == 13){
     $lastInput = $(this);
      if($lastInput.val() && $lastInput){
        $(this).after($lastInput.clone().val(''));
        }
     else{
        $lastInput.focus(); //fill this before getting next one
        }
    }
    return false;
    });

Answer 3

我建议在表单中输入所有内容，并在用户完成后立即隐藏和显示。

$("#next").click(function() {        
    $("input").hide();
    $("input").eq(++currentIndex).show();
});

Answer 4

您可以渲染整个表单，将每个表单元素包装在div中：

<form>
  <div class="control-wrap">
    <label for="a">Field label</label>
    <input type="text" name="a">
  </div>
  <div class="control-wrap">
    <label for="b">Second Field label</label>
    <input type="text" name="b">
  </div>
  ...
</form>

隐藏所有包装但第一个，并且当用户模糊每个元素时，显示下一个，但只有当（1）下一个表单元素仍然被隐藏时，（2）用户在字段中键入内容。

$('.control-wrap').hide().eq(0).show();
$('input').on('blur',function(e){
  var input = $(this);
    if(input.val().length > 0) {
      input.parents('.control-wrap').next('.control-wrap:hidden').show().find('input').focus();
    }            
});

这过于简单，只适用于文本字段，但希望它可以作为一个跳跃点。

Answer 5

尝试这个

            $(document).ready(function(){
                $('input:text').keypress(function(e){

                    var code = (e.keyCode ? e.keyCode : e.which);
                     if(code == 13) { //Enter keycode
                       $(this).next().show();
                       $(this).hide();
                     }
                });

            });

Answer 6

like this可以让你开始。

使表单中的每个输入逐个显示？

6 个答案: