使每个输入形式一个接一个出现？

Question

即时通讯使用jquery，并希望每个表单文本输入一个接一个出现，用户输入数据，然后出现下一个。在完成单个问题片段中的整个表格后，我希望提交整个表格的回复。

这可能吗？或者我必须让表格完整显示才能获得我想要的结果？

在此先感谢。

Answer 1

哇，每个人都比我快，我会把我的手放在锅里：

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

不要忘记停止传播/预防默认情况下，否则您将最终提交表单时，输入密钥被击中。

您可以添加一个异常，当该项目是调用$（this）.parents（“form”）。submit（）的最后一个元素时。而不是试图找到下一个元素并展示它。

Answer 2

我建议在窗体中有所有输入，并且只要用户完成一个隐藏和显示即可。

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

Answer 3

可以渲染整个表单，在一个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 4

试试这个

  $(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 5

东西like this可以让你开始。

Answer 6

有锚触发新的输入

$(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; 
    });