Question

我正在尝试在两个密码字段上移动JavaScript事件触发器（如果用户不相等则提醒用户）从表单元素到

document.getElementById('id_password1').addEventListener('keyUp', checkPass);
document.getElementById('id_password2').addEventListener('keyUp', checkPass);

但该函数从未被触发（如果我将checkPass更改为checkPass()，则仅在页面加载时调用该函数，但我不认为这意味着它是由听众触发）。 JavaScript控制台中没有错误。如果我将id更改为虚假的东西，则会出现此错误：

Uncaught TypeError: Cannot read property 'addEventListener' of null

（我对Chrome JavaScript检查员不够熟悉，知道它是否可以帮助我。）

如果事件触发器直接位于表单元素中，则一切正常。

以下是表单元素：

<p>Password: <input id="id_password1" name="password1" type="password" /></p>
<p>Password confirm: <input id="id_password2" name="password2" type="password" /></p>

我错过了什么？

<HTML><HEAD>
  <TITLE>Create account</TITLE>
</HEAD>

<BODY>
  <h1>Create account</h1>

  <form id="user_form" method="post" action="/accounts/register/">

     <p>Username: <input id="id_username" maxlength="30" name="username" type="text" /> <span class="helptext">Required. 30 characters or fewer. Letters, digits and @/./+/-/_ only.</span></p>
     <p>Password: <input id="id_password1" name="password1" type="password" /></p>
     <p>Password confirm: <input id="id_password2" name="password2" type="password" /></p>

     <span id="confirmMessage" class="confirmMessage"></span>

     <input type="submit" name="submit" value="Register" />
  </form>

<script language="JavaScript">
  function checkPass()  {
     var pass1 = document.getElementById('id_password1');
     var pass2 = document.getElementById('id_password2');
     alert("pass1=" + pass1.value + ", pass2=" + pass2.value);

     //Check passwords here. Set confirmMessage if bad.
  }

  document.getElementById('id_password1').addEventListener('keyUp', checkPass);
  document.getElementById('id_password2').addEventListener('keyUp', checkPass);

</script>

</BODY></HTML>

Answer 1

该事件区分大小写。尝试“keyup”（全部小写）。看到这个小提琴：

http://jsfiddle.net/LfamexLw/

function checkPass(){
    alert("keyup");
}

function checkPass2(){
    alert("keyUp");
}

document.getElementById('id_password1').addEventListener('keyup', checkPass);
document.getElementById('id_password1').addEventListener('keyUp', checkPass2);

你会注意到checkPass2永远不会开火。

Answer 2

这是基于@aquinas答案的工作代码，包括完整的check-the-password功能：

<HTML><HEAD>
   <TITLE>Create account</TITLE>
</HEAD>

<BODY>
   <h1>Create account</h1>

   <form id="user_form" method="post" action="/accounts/register/"
          enctype="multipart/form-data">

      <p><label for="id_username">Username:</label> <input id="id_username" maxlength="30" name="username" type="text" /> <span class="helptext">Required. 30 characters or fewer. Letters, digits and @/./+/-/_ only.</span></p>
      <p><label for="id_password1">Password:</label> <input id="id_password1" name="password1" type="password" /></p>
      <p><label for="id_password2">Password confirmation:</label> <input id="id_password2" name="password2" type="password" /></p>

      <!-- Where checkPass() writes its message -->
      <span id="confirmMessage" class="confirmMessage"></span>

      <P><input type="submit" name="submit" value="Register" /></P>
   </form>

<script language="JavaScript">
   /*
      From (8/27/2014)
      http://keithscode.com/tutorials/javascript/3-a-simple-javascript-password-validator.html

      Added the "don't print anything if one or both fields are empty" block
    */
   function checkPass()  {
      //Store the password field objects into variables ...
      var pass1 = document.getElementById('id_password1');
      var pass2 = document.getElementById('id_password2');
      //Store the Confimation Message Object ...
      var message = document.getElementById('confirmMessage');
      //Set the colors we will be using ...
      var goodColor = "#66cc66";
      var badColor = "#ff6666";
      //Compare the values in the password field
      //and the confirmation field
      if(pass1.value.length === 0  ||  pass2.value.length === 0)  {
         pass2.style.backgroundColor = null;
         message.style.color = null;
         message.innerHTML = "";
         return;
      }

      if(pass1.value === pass2.value){
         //The passwords match.
         //Set the color to the good color and inform
         //the user that they have entered the correct password
         pass2.style.backgroundColor = goodColor;
         message.style.color = goodColor;
         message.innerHTML = "Passwords Match!"
      }else{
         //The passwords do not match.
         //Set the color to the bad color and
         //notify the user.
         pass2.style.backgroundColor = badColor;
         message.style.color = badColor;
         message.innerHTML = "Passwords Do Not Match!"
      }
   }
   document.getElementById('id_password1').addEventListener('keyup', checkPass);
   document.getElementById('id_password2').addEventListener('keyup', checkPass);
   document.getElementById("id_username").focus();
</script>
</BODY></HTML>

enter image description here

函数永远不会被getElementById（）触发.addEventListener（）

2 个答案: