使每個輸入形式一個接一個出現？

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