为什么html密码字段变空答案

【问题标题】：Why the html password field getting empty为什么html密码字段变空
【发布时间】：2018-11-07 17:49:53
【问题描述】：

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

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;

    }

}

【问题讨论】：

除了 type="button"，您可以用一行替换所有 if/then/else 块：getLoginInput.type = getLoginInput.type === 'text' ？ '密码' : '文本';
@BlackCat 您需要将表单提交回服务器吗？
暂时不需要

标签： javascript html forms passwords

【解决方案1】：

将您的按钮标签更改为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

【讨论】：

【解决方案2】：

将 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>

【讨论】：

【解决方案3】：

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

两种可能的解决方案：

仅限 HTML

将您的按钮更改为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 type="button" onclick="changePwdView()"> Show/Hide </button>
    <button type="submit" name="submit"> Login </button>
  </form>
</body>

</html>

使用 JavaScript

您可以使用 preventDefault() 来做到这一点。

注意以下几点：

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

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;
  }
}

<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>

【讨论】：

【解决方案4】：

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

干杯

【讨论】：