除了 keyup 半工作之外所需输入的事件侦听器

Question

我有 3 个输入和一个提交按钮。默认情况下禁用提交。正确填写所有输入后，它将删除禁用的功能。然而，最后一个输入的侦听器是侦听解锁的，因此如果用户先填写该输入，则电话和电子邮件将不会解锁，因为许可证是关键功能..
我可以使用其他事件吗？我无法使用 onclick 提交按钮，因为它对侦听器禁用，对吗？我怎样才能创建一个侦听器，在从许可证侦听器上的 keyup 之外的提交按钮中删除禁用属性之前，等待 3 语句为真？
我还注意到，如果有人复制其中的信息，它不会注册，我已经尝试了其他事件，而这个效果最好，但您必须删除最后一个字符并重新输入最后一个字符才能使其正常工作。有人知道如何解决那里发生的事情吗？

<div id="formwrap">
<div id="ftx1">EMAIL: <span id="reqqq">Is Required</span></div>
<input id="email" type="email" name="email" size="" maxLength="64"
          placeholder=""
          title="Please provide only a email address">
</div>



<div id="formwrap">
<div id="ftx1">PHONE NUMBER: <span id="req">Is Required</span></div>
<input type="tel" id="phone" name="phone" class="" maxlength="17" value="" placeholder="PHONE NUMBER" title="Phone Number Format:1(614)000-0000"/>
</div> 




<div id="formwrap">
<div id="ftx1">DRIVERS LICENSE #: <span id="reqq">Is Required</span></div>
<input id="licno" class="test" name="mainddn" type="text" value="" placeholder="Ex. OH123456" maxlength="8">
<select class="test" id="element_5" name="mainstate">
<option value="OH">Ohio</option>
</select>
</div>

和 javascript

document.getElementById("phone").addEventListener("keyup", function() {
    var phoneInput = document.getElementById('phone').value;
    var phoneno = /^\(?([1]{1})?[(-. )]?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
    if(phoneInput.match(phoneno)) {
      document.getElementById("req").innerHTML = "Thank You";
      $phoneunlock = true;//this cant be seen unless I add it below
    } else {
      document.getElementById("req").innerHTML = "Amost Done";
      $phoneunlock = false;//this cant be seen unless I add it below
      }
});
   
   


document.getElementById("licno").addEventListener("keyup", function() {
   var licInput = document.getElementById('licno').value;
    var licpat = /^[a-zA-Z]{2}[0-9]{6}$/g;
     if(licInput.match(licpat)) {
      document.getElementById("reqq").innerHTML = "Thank You";
      $licnounlock = true;
      } else {
      document.getElementById("reqq").innerHTML = "Amost Done";
      $licnounlock = false;
      }
});


document.getElementById("email").addEventListener("keyup", function() {
   var emailInput = document.getElementById('email').value;
    var emailpat = /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$/;
     if(emailInput.match(emailpat)) {
      document.getElementById("reqqq").innerHTML = "Thank You";
      $emailunlock = true;
      } else {
      document.getElementById("reqqq").innerHTML = "Amost Done";
      $emailunlock = false;
      }
});






document.getElementById("licno").addEventListener("keyup", function() {
    var licInput = document.getElementById('licno').value;

  if ($phoneunlock && $emailunlock && $licnounlock) {
 //yes  are true
 document.getElementById('submit').removeAttribute("disabled");
} else {
 //no  are not true
  document.getElementById('submit').setAttribute("disabled", null);
}  
});

Answer 1

可以通过多种方式完成，这里我分享其中一种。

要解决侦听器在解锁提交按钮之前不等待所有三个输入正确填写的第一个问题，您可以使用 input 事件而不是 keyup。只要输入字段的值发生变化，包括通过复制粘贴粘贴文本，就会触发输入事件。

关于粘贴信息不会立即注册的第二个问题，您可以对所有输入字段使用输入事件，这应该实时捕获此类更改。

检查修改后的代码，

<div id="formwrap">
    <div id="ftx1">EMAIL: <span id="reqqq">Is Required</span></div>
    <input id="email" type="email" name="email" size="" maxLength="64"
              placeholder=""
              title="Please provide only a email address">
</div>

<div id="formwrap">
    <div id="ftx1">PHONE NUMBER: <span id="req">Is Required</span></div>
    <input type="tel" id="phone" name="phone" class="" maxlength="17" value="" placeholder="PHONE NUMBER" title="Phone Number Format:1(614)000-0000"/>
</div> 

<div id="formwrap">
    <div id="ftx1">DRIVERS LICENSE #: <span id="reqq">Is Required</span></div>
    <input id="licno" class="test" name="mainddn" type="text" value="" placeholder="Ex. OH123456" maxlength="8">
    <select class="test" id="element_5" name="mainstate">
        <option value="OH">Ohio</option>
    </select>
</div>

<button id="submit" disabled>Submit</button>

<script>
    var $phoneunlock = false;
    var $emailunlock = false;
    var $licnounlock = false;

    document.getElementById("phone").addEventListener("input", function() {
        var phoneInput = document.getElementById('phone').value;
        var phoneno = /^\(?([1]{1})?[(-. )]?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/;
        if(phoneInput.match(phoneno)) {
            document.getElementById("req").innerHTML = "Thank You";
            $phoneunlock = true;
        } else {
            document.getElementById("req").innerHTML = "Almost Done";
            $phoneunlock = false;
        }
        unlockSubmit();
    });

    document.getElementById("licno").addEventListener("input", function() {
        var licInput = document.getElementById('licno').value;
        var licpat = /^[a-zA-Z]{2}[0-9]{6}$/g;
        if(licInput.match(licpat)) {
            document.getElementById("reqq").innerHTML = "Thank You";
            $licnounlock = true;
        } else {
            document.getElementById("reqq").innerHTML = "Almost Done";
            $licnounlock = false;
        }
        unlockSubmit();
    });

    document.getElementById("email").addEventListener("input", function() {
        var emailInput = document.getElementById('email').value;
        var emailpat = /[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$/;
        if(emailInput.match(emailpat)) {
            document.getElementById("reqqq").innerHTML = "Thank You";
            $emailunlock = true;
        } else {
            document.getElementById("reqqq").innerHTML = "Almost Done";
            $emailunlock = false;
        }
        unlockSubmit();
    });

    function unlockSubmit() {
        if ($phoneunlock && $emailunlock && $licnounlock) {
            document.getElementById('submit').removeAttribute("disabled");
        } else {
            document.getElementById('submit').setAttribute("disabled", "disabled");
        }  
    }
</script>

让我知道它有效！