单击事件适用于第三次或第四次尝试按钮

Question

这是

的延续

我使用 setTimeout() 在按下选项卡时将光标放在输入字段上，没有它焦点会转到 <div> 之外的 link 出于某种原因我不知道的。 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;
});

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

但是不知何故，直到第三次或第四次尝试，点击功能才起作用。悬停功能在鼠标第一次移动时起作用，每次鼠标移到提交按钮上时，它都会在控制台上打印“悬停”。

即使在清除所有 setTimeout() 之后，焦点也会以某种方式移动到输入字段，而不是继续 console.log() onclick。

谁能帮我理解这个问题并帮助解决第一次点击提交表单的问题？

更新：

1) 这是从移动应用程序输入的，即使在重新编辑显示为“”的引述之后它在我的代码中是正确的，只是这里没有。

2) 焦点和超时事件是在移出输入域时验证输入域，例如如果该域为空，则光标不会移动到下一个输入域。但是只是焦点不起作用，Tab 只是将光标从输入字段中移到它下面的 link，因此超时有助于将光标保持在输入字段中。

3) 片段 - 这不会复制问题，因为到目前为止我可以 post 代码抱歉 :(

(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() 并且它与添加 return false; 一起工作placeCursor() 函数。

$.(":focus").blur() 从任何当前获得焦点的元素上移除焦点。这是我们代码逻辑的救星。

所以代码看起来像

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

....

function placeCursor(id) {
  id.focus(function(e) {
  e.stopPropagation();
  //e.cancelBubble();
  id.caretToEnd();
 });
 id.focus();
 return false;
}

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

单击事件适用于第三次或第四次尝试按钮

Click event works on third or fourth try on button

html

javascript

jquery

click

onclick