Question

我正在创建一个密码字段，用户可以隐藏/显示他输入的密码。以下是html和javascript代码。问题是当我在浏览器中测试代码时： - 我输入密码并点击＆＃39;显示/隐藏＆＃39;按钮和密码可见，页面刷新，然后密码消失。我该怎么解决这个问题？

html：

<html>
<head>
    <meta charset="utf-8" />
    <title> Page Title </title>
    <meta name ="viewport" content="width= device-width, initial-scale=1">
    <script src="main.js"></script>
</head>
<body>
    <form action="">
        <input type="text" name="uid" placeholder="Username">
        <input id="loginPwdChange" type="password" name="pwd" placeholder="Password">
        <button onclick="changePwdView()"> Show/Hide </button>
        <button type="submit" name="submit"> Login </button>
    </form>
</body>
</html>

JS：

let loginPwdStatus = false;

function changePwdView(){

    let getLoginInput = document.getElementById("loginPwdChange");

    if(loginPwdStatus === false){
        getLoginInput.setAttribute("type", "text");
        loginPwdStatus = true;

    }else if(loginPwdStatus === true){
        getLoginInput.setAttribute("type", "password");
        loginPwdStatus = false;

    }

}

Answer 1

这是因为显示/隐藏密码的按钮正在提交表单。点击显示/隐藏按钮时，您需要阻止表单提交。

两种可能的解决方案：

仅限HTML

将您的按钮更改为type="button"。它会阻止表单提交。

＆＃13;

let loginPwdStatus = false;

function changePwdView() {

  let getLoginInput = document.getElementById("loginPwdChange");

  if (loginPwdStatus === false) {
    getLoginInput.setAttribute("type", "text");
    loginPwdStatus = true;

  } else if (loginPwdStatus === true) {
    getLoginInput.setAttribute("type", "password");
    loginPwdStatus = false;
  }
}

＆＃13;

<html>

<head>
  <meta charset="utf-8" />
  <title> Page Title </title>
  <meta name="viewport" content="width= device-width, initial-scale=1">
  <script src="main.js"></script>
</head>

<body>
  <form action="">
    <input type="text" name="uid" placeholder="Username">
    <input id="loginPwdChange" type="password" name="pwd" placeholder="Password">
    <button type="button" onclick="changePwdView()"> Show/Hide </button>
    <button type="submit" name="submit"> Login </button>
  </form>
</body>

</html>

＆＃13;

使用JavaScript

您可以使用preventDefault()执行此操作。

请注意以下事项：

点击按钮时，将参数event传递给您的功能：onclick="changePwdView(event)"
不要忘记JS代码中的参数：function changePwdView(event) { ... }
要阻止表单提交，请使用event.preventDefault();

＆＃13;

let loginPwdStatus = false;

function changePwdView(event) {
  event.preventDefault();

  let getLoginInput = document.getElementById("loginPwdChange");

  if (loginPwdStatus === false) {
    getLoginInput.setAttribute("type", "text");
    loginPwdStatus = true;

  } else if (loginPwdStatus === true) {
    getLoginInput.setAttribute("type", "password");
    loginPwdStatus = false;
  }
}

＆＃13;

<html>

<head>
  <meta charset="utf-8" />
  <title> Page Title </title>
  <meta name="viewport" content="width= device-width, initial-scale=1">
  <script src="main.js"></script>
</head>

<body>
  <form action="">
    <input type="text" name="uid" placeholder="Username">
    <input id="loginPwdChange" type="password" name="pwd" placeholder="Password">
    <button onclick="changePwdView(event)"> Show/Hide </button>
    <button type="submit" name="submit"> Login </button>
  </form>
</body>

</html>

＆＃13;

Answer 2

将按钮标记更改为type="button"

<html>
<head>
    <meta charset="utf-8" />
    <title> Page Title </title>
    <meta name ="viewport" content="width= device-width, initial-scale=1">
    <script src="main.js"></script>
</head>
<body>
    <form action="">
        <input type="text" name="uid" placeholder="Username">
        <input id="loginPwdChange" type="password" name="pwd" placeholder="Password">
        <button onclick="changePwdView()"> Show/Hide </button>
        <button type="button" name="submit"> Login </button>
    </form>
</body>
</html>

然后您可以添加处理程序以在Login按钮单击

上调用ajax

Answer 3

在显示/隐藏按钮中添加type =“button”;

let loginPwdStatus = false;

function changePwdView(){

    let getLoginInput = document.getElementById("loginPwdChange");

    if(loginPwdStatus === false){
        getLoginInput.setAttribute("type", "text");
        loginPwdStatus = true;

    }else if(loginPwdStatus === true){
        getLoginInput.setAttribute("type", "password");
        loginPwdStatus = false;

    }

}

<html>
<head>
    <meta charset="utf-8" />
    <title> Page Title </title>
    <meta name ="viewport" content="width= device-width, initial-scale=1">
    <script src="main.js"></script>
</head>
<body>
    <form action="">
        <input type="text" name="uid" placeholder="Username">
        <input id="loginPwdChange" type="password" name="pwd" placeholder="Password">
        <button onclick="changePwdView()" type="button"> Show/Hide </button>
        <button type="submit" name="submit"> Login </button>
    </form>
</body>
</html>

Answer 4

<button type="button" onclick="changePwdView()"> Show/Hide </button>可以提供帮助

干杯

为什么html密码字段变空

4 个答案: