为何HTML密码框点击显示/隐藏按钮后页面刷新内容清空？

你碰到的这个问题其实很常见——那个「Show/Hide」按钮放在<form>标签里，浏览器默认会把没有指定type属性的按钮识别为type="submit"，点击它就会触发表单提交，页面一刷新，输入的密码自然就消失了。下面给你几种简单的解决办法：

方法一：给按钮指定type="button" #

这是最直接的解决方案，只要修改按钮的HTML代码，明确告诉浏览器这是一个普通按钮，不是提交按钮：

<button type="button" onclick="changePwdView()"> Show/Hide </button>

这样点击按钮时只会执行changePwdView()函数，不会触发表单提交和页面刷新。

方法二：在JS函数中阻止默认事件 #

如果你不想修改太多HTML，可以在JavaScript的切换函数里添加阻止默认行为的代码：
首先修改HTML的按钮，把事件对象传进去：

<button onclick="changePwdView(event)"> Show/Hide </button>

然后更新你的JS函数：

let loginPwdStatus = false; 
function changePwdView(e){
  e.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和JavaScript代码解耦，代码结构更清晰：
先修改HTML，去掉内联的onclick，给按钮加一个ID：

<button id="togglePwdBtn"> Show/Hide </button>

然后更新你的JS代码：

let loginPwdStatus = false;
// 获取元素
const toggleBtn = document.getElementById('togglePwdBtn');
const loginInput = document.getElementById('loginPwdChange');

// 绑定点击事件
toggleBtn.addEventListener('click', function(e){
  e.preventDefault();
  // 简化状态切换逻辑
  loginPwdStatus = !loginPwdStatus;
  // 根据状态设置输入框类型
  loginInput.setAttribute('type', loginPwdStatus ? 'text' : 'password');
});

以上三种方法都能解决页面刷新的问题，你可以根据自己的代码习惯选择其中一种。测试一下，修改后点击「Show/Hide」按钮就只会切换密码的显示状态，输入的密码也能保留下来了。

内容的提问来源于stack exchange，提问作者BlackCat