Question

我在密码旁边有一个小字段，旁边有一个按钮。如果单击该按钮，它将显示您的密码，如果再次单击，它将被隐藏。一切正常，但是在显示密码后，它将执行我为表单设置的操作。有关如何解决此问题的任何想法？

<form action='bod.php' method='post'>
<table>
   <tr>
     <td class='col-2'>
    <input type='text' name='Email' id='Email' placeholder='E-mail' class='input-effect form__input' value='$Email'>
     </td>
     <td class='col-2'>
    <input type='password' name='Wachtwoord' id='Wachtwoord' placeholder='Wachtwoord' class='input-effect form__input' value='$Wachtwoord'>
     </td>
     <td>
    <input type='image' src='img/eye.png' onClick='showPswd()' class='show'>
     </td>
    </tr>
    <tr>
      <td class='col-2'>
    <input type='text' name='Bod' id='Bod' placeholder='Bod' class='input-effect form__input' onchange='controleerBod()'>
       </td>
       <td class='col-2'>
     <button type='submit' id='Bied'>Bied</button>
       </td>                            
      </tr>                     
   </table>
</form>



 // This is my JavaScript (it works)
// Show password
function showPswd() {
  var x = document.getElementById("Wachtwoord");
  if (x.type === "password") {
     x.type = "text";
  } else {
    x.type = "password";
  }
}

因此，如果您单击图像“ eye.png”，它将显示您的密码，如果您第二次单击，它将隐藏它。现在，它会显示您的密码，并立即重新连接到“ bod.php”（表单操作）。

Answer 1

您需要使用 preventDefault（）函数。并且您还需要在函数中传递 event 参数

<input type='image' src='img/eye.png' onClick='showPswd(event)' class='show'>

这应该是您的JS代码

function showPswd(evt) {
    evt.preventDefault();
    var x = document.getElementById("Wachtwoord");
    if (x.type === "password") {
       x.type = "text";
    } else {
      x.type = "password";
    }
}

Answer 2

使用图像作为图像。试试这个：

<img src='img/eye.png' onClick='showPswd()' class='show'>

onclick还会重定向到“表单操作”

2 个答案: