Question

这是This

的延续

我使用setTimeout()将光标放在按下选项卡的输入字段上，否则由于某些我不知道的原因，焦点将转到<div>之外的链接。 setTimeout()解决了该问题，但现在：

点击提交按钮后，表单除了将光标放在输入字段上三到四次之外什么也没做，然后继续提交。

这是提交按钮功能

$(“#submitbtn”).click(function(e) {
 console.log(“click”);
 e.preventDefault();
 var s = setTimeout(function() {
   removeTimeouts();
   startValidation();
   });
 e.stopPropagation();
 e.cancelBubble = true;
});

这是“提交”按钮的悬停功能

$(“#submitbtn”).mouseover(function(e) {
 console.log(“Hover”);
 removeTimeouts();
 $(“#submitbtn”).focus();
 e.preventDefault();
 e.stopPropagation();
 e.cancelBubble = true;
});

在整个JavaScript文件中，函数removeTimeouts()具有所有clearTimeout()的所有setTimeout()。

但是以某种方式，单击功能直到第三次或第四次尝试才起作用。悬停功能可在第一次移动鼠标时使用，每次将鼠标移到“提交”按钮上时，它将在控制台上打印“悬停”。

即使在清除所有setTimeout()之后，焦点仍会移至输入字段，而不是继续进行console.log() onclick。

有人可以帮助我理解问题并帮助您修复首次单击时提交的表单吗？

更新：

1）即使在重新编辑显示为“”的引号后，也可以从移动应用程序中键入它。

2）焦点和超时事件是在移出输入字段时验证输入字段，例如，如果该字段为空，光标将不会移至下一个输入字段。但是，只有焦点无法正常工作，Tab键只会将光标从输入字段中移到其下方的链接，因此超时有助于将光标保留在输入字段中。

3）代码段-这不能复制问题，因为到目前为止，我可以将代码发布为抱歉：（

(function ($) {
    // Behind the scenes method deals with browser
    // idiosyncrasies and such
    $.caretTo = function (el, index) {
        if (el.createTextRange) { 
            var range = el.createTextRange(); 
            range.move("character", index); 
            range.select(); 
        } else if (el.selectionStart != null) { 
            el.focus(); 
            el.setSelectionRange(index, index); 
        }
    };
    
    // Another behind the scenes that collects the
    // current caret position for an element
    
    // TODO: Get working with Opera
    $.caretPos = function (el) {
        if ("selection" in document) {
            var range = el.createTextRange();
            try {
                range.setEndPoint("EndToStart", document.selection.createRange());
            } catch (e) {
                // Catch IE failure here, return 0 like
                // other browsers
                return 0;
            }
            return range.text.length;
        } else if (el.selectionStart != null) {
            return el.selectionStart;
        }
    };

    // The following methods are queued under fx for more
    // flexibility when combining with $.fn.delay() and
    // jQuery effects.

    // Set caret to a particular index
    $.fn.caret = function (index, offset) {
        if (typeof(index) === "undefined") {
            return $.caretPos(this.get(0));
        }
        
        return this.queue(function (next) {
            if (isNaN(index)) {
                var i = $(this).val().indexOf(index);
                
                if (offset === true) {
                    i += index.length;
                } else if (typeof(offset) !== "undefined") {
                    i += offset;
                }
                
                $.caretTo(this, i);
            } else {
                $.caretTo(this, index);
            }
            
            next();
        });
    };

    // Set caret to beginning of an element
    $.fn.caretToStart = function () {
        return this.caret(0);
    };

    // Set caret to the end of an element
    $.fn.caretToEnd = function () {
        return this.queue(function (next) {
            $.caretTo(this, $(this).val().length);
            next();
        });
    };
}(jQuery));



var allTimeouts = [];
function placeCursor(id) {
  id.focus(function(e) {
    e.stopPropagation();
    //e.cancelBubble();
    id.caretToEnd();
  });
  id.focus();
}
function removeTimeouts(){
  for(var i = 0; i < allTimeouts.length; i++) {
    clearTimeout(allTimeouts[i]);
  }
}
function focusInNumber (id) {
  var thisID = id;
  var nextID = id + 1;
  var preID = id - 1;
  //$("#number" + thisID).prop("disabled", false);
  var s = setTimeout(function() {
    placeCursor($("#number" + thisID));
  });
  allTimeouts.push(s);
  if(preID != 0) {
    if($("#number" + preID).val().length <= 0) {
      var s = setTimeout(function() {
        placeCursor($("#number" + preID));
      });
      allTimeouts.push(s);
    }
  } 
}
function focusOutNumber (id) {
  var thisID = id;
  var nextID = id + 1;
  var preID = id - 1;
  var value = $("#number" + thisID).val();
  var regex = new RegExp(/^\d*$/);
  var regex1 = new RegExp(/^.*[\+\-\.].*/);
  var l = $("#number" + thisID).val().length;
  if(!value.match(regex)) {
    alert("Just enter numerical digits");
    var s = setTimeout(function() {
      placeCursor($("#number" + thisID));
    },5000);
    allTimeouts.push(s);
  } else {
    if (l<=0) {
      alert("This field cannot be empty");
      var s = setTimeout(function() {
        placeCursor($("#number" + thisID));
      },5000);
      allTimeouts.push(s);
    } else {
      if(value.match(regex)) {
        var s = setTimeout(function() {
          placeCursor($("#number" + nextID));
        }, 100);
        allTimeouts.push(s);
      }
    }
  }
}
$(document).ready(function(){
  $("#number1").focusin(function(){
    focusInNumber(1);
  });
  $("#number1").focusout(function(){
    focusOutNumber(1);
  });
  $("#number2").focusin(function(){
    focusInNumber(2);
  });
  $("#number2").focusout(function(){
    focusOutNumber(2);
  });
  $("#number3").focusin(function(){
    focusInNumber(3);
  });
  $("#number3").focusout(function(){
    focusOutNumber(3);
  });
  $("#number4").focusin(function(){
    focusInNumber(4);
  });
  $("#number4").focusout(function(){
    focusOutNumber(4);
  });
  $("#submitbtn").click(function(e) {
     console.log("click");
     e.preventDefault();
     var s = setTimeout(function() {
       removeTimeouts();
       alert("startValidation()");
     });
     e.stopPropagation();
     e.cancelBubble = true;
  });
  $("#submitbtn").mouseover(function(e) {
     console.log("Hover");
     removeTimeouts();
     $("#submitbtn").focus();
     e.preventDefault();
     e.stopPropagation();
     e.cancelBubble = true;
  });
});

.SubmitBtn {
  width: 100%;
  background-color: #cccccc;
}
.Submitbtn:hover {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input type="number" class="reqField" id="number1" placeholder="Enter Number only"></input>
<input type="number" class="reqField" id="number2" placeholder="Enter Number only"></input>
<input type="number" class="reqField" id="number3" placeholder="Enter Number only"></input>
<input type="number" class="reqField" id="number4" placeholder="Enter Number only"></input>

<div id="submitbtn" class="SubmitBtn">Submit</div>

Answer 1

在弄清所有语句并弄清console.log以弄清代码流之后，我发现在$("#submitbtn").click()上有一个.focusout()被调用。

由于这些.focusout()是对<input>字段进行持续验证所必需的，因此我尝试添加$.(":focus").blur()，并且在{{ 1}}功能。

return false;从任何当前集中的元素中除去焦点。这可以节省我们的代码逻辑。

所以代码看起来像

placeCursor()

希望有一天能对某人有所帮助。谢谢！

Click事件在第三或第四次尝试按钮上起作用

1 个答案: