Javascript 为什么html密码字段变为空_Javascript_Html_Forms_Passwords

Javascript 为什么html密码字段变为空

javascript html forms passwords

Javascript 为什么html密码字段变为空,javascript,html,forms,passwords,Javascript,Html,Forms,Passwords,我正在创建一个密码字段，用户可以在其中隐藏/显示他正在输入的密码。下面是html和javascript代码。问题是当我在浏览器中测试代码时：- 我输入密码并单击“显示/隐藏”按钮，密码可见，页面刷新，然后密码消失。我应该如何解决这个问题 html: <html> <head> <meta charset="utf-8" /> <title> Page Title </title> <meta name ="

我正在创建一个密码字段，用户可以在其中隐藏/显示他正在输入的密码。下面是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>

将按钮标签更改为

type=“button”


页面标题
显示/隐藏
登录

然后，您可以添加处理程序，以便在

登录时调用ajax

按钮单击将按钮标记更改为

type=“button”


页面标题
显示/隐藏
登录

然后，您可以添加处理程序，以便在

登录按钮上调用ajax，单击将type=“button”添加到显示/隐藏按钮

让loginPwdStatus=false；
函数changePwdView（）{
让getLoginInput=document.getElementById（“loginPwdChange”）；
if（loginPwdStatus==false）{
setAttribute（“类型”、“文本”）；
loginPwdStatus=true；
}else if（loginPwdStatus===true）{
setAttribute（“类型”、“密码”）；
loginPwdStatus=false；
}
}

页面标题
显示/隐藏
登录
将type=“button”添加到显示/隐藏按钮

让loginPwdStatus=false；
函数changePwdView（）{
让getLoginInput=document.getElementById（“loginPwdChange”）；
if（loginPwdStatus==false）{
setAttribute（“类型”、“文本”）；
loginPwdStatus=true；
}else if（loginPwdStatus===true）{
setAttribute（“类型”、“密码”）；
loginPwdStatus=false；
}
}

页面标题
显示/隐藏
登录
这是因为显示/隐藏密码的按钮正在提交表单。单击“显示/隐藏”按钮时，您需要阻止表单提交
两种可能的解决办法：
仅使用HTML

将按钮更改为type=“button”
。它将阻止表单提交

让loginPwdStatus=false；
函数changePwdView（）{
让getLoginInput=document.getElementById（“loginPwdChange”）；
if（loginPwdStatus==false）{
setAttribute（“类型”、“文本”）；
loginPwdStatus=true；
}else if（loginPwdStatus===true）{
setAttribute（“类型”、“密码”）；
loginPwdStatus=false；
}
}

页面标题
显示/隐藏
登录
这是因为显示/隐藏密码的按钮正在提交表单。单击“显示/隐藏”按钮时，您需要阻止表单提交
两种可能的解决办法：
仅使用HTML

将按钮更改为type=“button”
。它将阻止表单提交

让loginPwdStatus=false；
函数changePwdView（）{
让getLoginInput=document.getElementById（“loginPwdChange”）；
if（loginPwdStatus==false）{
setAttribute（“类型”、“文本”）；
loginPwdStatus=true；
}else if（loginPwdStatus===true）{
setAttribute（“类型”、“密码”）；
loginPwdStatus=false；
}
}

页面标题
显示/隐藏
登录
显示/隐藏
会有所帮助
干杯
显示/隐藏
会有所帮助
Cheersspart type=“button”，您可以用一行替换所有if/then/else块：getLoginInput.type=getLoginInput.type=='text'？'密码'：'文本'@BlackCat您需要将表单提交回服务器吗？目前，我不需要分开type=“button”，您可以用一行替换所有if/then/else块：getLoginInput.type=getLoginInput.type==“text”？'密码'：'文本'@BlackCat您需要将表单提交回服务器吗？目前，我不需要
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()"> Show/Hide </button>
        <button type="button" name="submit"> Login </button>
    </form>
</body>
</html>