修改

Question

我试图不填写我想要填写的所有字段的用户，只有在填写完前一个字段后才显示下一个字段。我使用了keyup事件但这并不是最好的用户体验。我想在用户完成输入后等待1秒，然后显示下一个字段。这是我到目前为止的代码。

jQuery(document).on('keyup change', '[id*="fieldname"]', function(){ 
var id = jQuery(this).attr('id'); 

if(/fieldname2_/.test(id)) jQuery('[id*="fieldname3_"]').closest('.hide').removeClass('hide'); 
if(/fieldname3_/.test(id)) jQuery('[id*="fieldname4_"]').closest('.hide').removeClass('hide'); 
if(/fieldname4_/.test(id)) jQuery('[id*="fieldname6_"]').closest('.hide').removeClass('hide'); 
if(/fieldname6_/.test(id)) jQuery('[id*="fieldname5_"]').closest('.hide').removeClass('hide'); 
if(/fieldname5_/.test(id)) jQuery('[id*="fieldname7_"]').closest('.hide').removeClass('hide'); 
if(/fieldname7_/.test(id)) jQuery('[id*="fieldname1_"]').closest('.hide').removeClass('hide'); 
if(/fieldname7_/.test(id)) jQuery('[id*="fieldname24_"]').closest('.hide').removeClass('hide'); 
if(/fieldname7_/.test(id)) jQuery('[id*="fieldname10_"]').closest('.hide').removeClass('hide'); 
if(/fieldname7_/.test(id)) jQuery('[id*="fieldname12_"]').closest('.hide').removeClass('hide'); 
if(/fieldname7_/.test(id)) jQuery('[id*="fieldname29_"]').closest('.hide').removeClass('hide'); 
if(/fieldname7_/.test(id)) jQuery('[id*="fieldname42_"]').closest('.hide').removeClass('hide'); 
if(/fieldname7_/.test(id)) jQuery('[id*="fieldname43_"]').closest('.hide').removeClass('hide'); 
if(/fieldname7_/.test(id)) jQuery('[id*="fieldname35_"]').closest('.hide').removeClass('hide'); 
if(/fieldname7_/.test(id)) jQuery('[id*="fieldname37_"]').closest('.hide').removeClass('hide'); 
if(/fieldname7_/.test(id)) jQuery('[id*="fieldname44_"]').closest('.hide').removeClass('hide'); 
}); 
</script>

我还试图通过使用此事件来增加一些时间，但它似乎没有起作用：

jQuery(document).on('keyup(_.debounce(doSomething , 100)) change', '[id*="fieldname"]', function(){ 
var id = jQuery(this).attr('id');

关于如何在完成打字后等待1秒以显示下一个字段的任何想法？

Answer 1

这样的东西？

var timer;
var hiddenArray=[];
for(i=0;i<$(".hidden").length;i++){
  hiddenArray.push($(".hidden").eq(i));
}

$("input").on("keyup",function(){
  clearTimeout(timer);
  if($(this).val()!=""){
    timer = setTimeout(function(){

      for(i=0;i<hiddenArray.length;i++){
        if(hiddenArray[i].hasClass("hidden")){
          hiddenArray[i].removeClass("hidden").find("input").focus();
          return;
        }
      }
    },1000);  // 1 second delay
  }
});

.hidden{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  Field #1: <input type="text" id="fieldname1">
</div>
<div class="hidden">
  Field #2: <input type="text" id="fieldname2">
</div>
<div class="hidden">
  Field #3: <input type="text" id="fieldname3">
</div>
<div class="hidden">
  Field #4: <input type="text" id="fieldname4">
</div>
<div class="hidden">
  Field #5: <input type="text" id="fieldname5">
</div>
<div class="hidden">
  Field #6: <input type="text" id="fieldname6">
</div>
<div class="hidden">
  Field #7: <input type="text" id="fieldname7">
</div>
<div class="hidden">
  Field #8: <input type="text" id="fieldname8">
</div>
<div class="hidden">
  Field #9: <input type="text" id="fieldname9">
</div>
<div class="hidden">
  Field #10: <input type="text" id="fieldname10">
</div>

它使用一个数组来循环隐藏元素和一个在keyup上重置自己的计时器，只有在消耗了延迟时才执行该函数。

<小时/>

修改

再次查看相关代码。

对于您的“特殊输入订单”...
可以使用.match()来使用regex 使用switch()而不是太多相同的if。

假设input在HTML中按顺序编号。

var timer;
var inputArray=[];
for(i=0;i<$("[id*='fieldname']").length;i++){
  inputArray.push( $("[id*='fieldname']").eq(i) );
  //console.log( inputArray[i].attr("id") );
}

$(document).on("keyup", "[id*='fieldname']", function(e){
  clearTimeout(timer);

  var thisId = $(this).attr("id");
  console.log( "$(this): #"+ thisId );

  if($(this).val()!=""){
    timer = setTimeout(function(){
      //console.log("timer end");

      var thisInputNumber = parseInt( thisId.match( /\D(\d+).+/ )[1] );
      console.log( thisInputNumber );

      switch(thisInputNumber){

          // Special cases.
        case 4:
          var ToUnhide = 6
          inputArray[ToUnhide-1].parents(".tablerow").show().find("input").focus();
          break;

        case 5:
          var ToUnhide = 7
          inputArray[ToUnhide-1].parents(".tablerow").show().find("input").focus();
          break;

        case 6:
          var ToUnhide = 5
          inputArray[ToUnhide-1].parents(".tablerow").show().find("input").focus();
          break;

        case 7:
          // List of input ids to unhide.
          var ToUnhide=[1,24,10,12,29,42,43,35,37,44];
          // Unhide all these input ids.
          for(k=0;k<ToUnhide.length;k++){
            inputArray[ToUnhide[k]-1].parents(".tablerow").show().find("input").focus();
          }
          break;

        default:
          console.log("default case");
          inputArray[thisInputNumber].parents(".tablerow").show().find("input").focus();
          break;
                            }
    },1000);  // 1 second delay
  }
});

CodePen

键入完成后延迟显示下一个字段（jQuery）

1 个答案:

修改