javascript - 阻止焦点调用模糊功能

如果验证失败，我正在验证电子邮件地址并创建警报消息。当用户单击警报消息上的“确定”时，应将焦点返回到电子邮件地址文本框。

我在使用对焦功能时遇到了问题，即调用模糊，而模糊功能又又调用了焦点。它正在无限循环中运行。请参考以下示例-

BlurAndFocusIssue

input.onblur = function() {
  samp.innerHTML="Called blur";
  if (!input.value.includes('@')) {
    input.classList.add('invalid');
    alert('Please enter a correct email.');
    document.getElementById("input").focus();
  }
};


input.onfocus = function() {
  samp.innerHTML="Called focus";
  if (this.classList.contains('invalid')) {
    this.classList.remove('invalid');
    error.innerHTML = "";
  }
};

一旦焦点位于电子邮件地址内，我需要允许用户输入电子邮件地址，并在onBlur功能上对其进行验证。

最佳答案

使用setTimeout()控制Onblur

JSFiddle

input.onblur = function() {
  samp.innerHTML="Called blur";
  var validating = false; //<-- IMPORTANT
  if (!input.value.includes('@')) {
    input.classList.add('invalid');
     if(validating == false) {
              validating = true
              alert('Please enter a correct email.');
              setTimeout(function(){
              input.focus();
              validating = false;
            }, 1);
     }
  }
};


input.onfocus = function() {
  samp.innerHTML="Called focus";
  if (this.classList.contains('invalid')) {
    this.classList.remove('invalid');
    error.innerHTML = "";
  }
};

关于javascript - 阻止焦点调用模糊功能，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52911644/