实现密码输入框显示与隐藏功能有五种方法：一、切换input的type属性；二、用CSS伪元素模拟可见性；三、用output元素反馈密码强度；四、用pattern属性触发浏览器验证；五、用data-*属性存储并持久化显示状态。

如果您希望在网页中实现密码输入框的显示与隐藏功能，则可能是由于用户需要临时查看已输入的密码内容。以下是实现此功能的多种方法：

一、使用HTML5原生input type="password"配合JavaScript切换类型

该方法通过动态修改input元素的type属性，在password和text之间切换，从而控制密码是否明文显示。浏览器原生支持type属性变更，无需额外依赖。

1、在HTML中定义一个密码输入框及一个切换按钮：

2、为按钮绑定点击事件，获取当前input元素的type值：

3、若当前type为"password"，则将其设为"text"；否则设回"password"：

4、同时更新按钮的文字提示，例如从"显示密码"变为"隐藏密码"：

5、确保input元素具有id属性（如id="pwdInput"），以便JavaScript准确获取目标节点：

二、使用HTML5新增的toggle属性模拟密码可见性切换

该方法不直接修改type属性，而是借助CSS伪元素与JavaScript控制视觉层的遮罩效果，在保留type="password"的前提下模拟显示逻辑。适用于需严格保持表单type不变的场景。

1、在input外层包裹一个相对定位的容器，并添加一个绝对定位的“眼睛”图标按钮：

2、初始状态下，图标显示为闭眼样式，对应密码隐藏状态：

3、点击图标时，切换图标为睁眼样式，并通过CSS类控制内部文本的透明度或覆盖层显隐：

4、使用JavaScript监听图标点击，切换容器的data-visible属性值为true或false：

5、配合CSS属性选择器，当[data-visible="true"]时，使input内字符以text形式视觉呈现（例如设置font-family为等宽字体并降低字母间距干扰）：

三、使用HTML5 output元素实时反馈密码明文长度与强度

该方法不直接显示密码字符，而是通过output标签反馈当前输入密码的长度、大小写字母、数字、特殊符号等特征，提升安全性的同时提供可视化提示。

1、在form中添加output元素，用于显示密码分析结果：

2、为input type="password"绑定input事件，实时读取value.length：

3、判断value中是否包含至少一个大写字母、小写字母、数字及特殊字符：

4、将各项检测结果拼接为字符串，写入output元素的textContent中：

5、根据检测项数量动态设置output的color样式，例如全部满足时显示强密码，仅满足两项时显示弱密码：

四、使用HTML5 pattern属性限制密码格式并触发浏览器验证提示

该方法利用input的pattern属性定义正则表达式规则，在用户失焦或提交时由浏览器自动校验，并显示原生提示气泡，减少JS逻辑负担。

1、为input设置pattern属性，例如要求至少8位，含大小写字母与数字：

2、添加title属性，作为pattern不匹配时的提示文案：

3、确保form启用novalidate属性或依赖浏览器默认验证行为：

4、当用户输入不符合pattern的内容并尝试提交时，浏览器将阻止提交并高亮显示错误位置：

5、可配合JavaScript监听invalid事件，在控制台输出密码格式不满足要求的具体原因：

五、使用HTML5自定义data-*属性存储密码显示状态标识

该方法通过data-showing属性记录当前密码字段是否处于明文状态，便于多控件协同控制及状态持久化，避免全局变量污染。

1、为input元素添加data-showing="false"初始属性：

2、点击切换按钮时，读取该属性值并取反：

3、根据新值更新type属性与data-showing属性同步：

4、将更新后的data-showing值保存至localStorage，使页面刷新后仍保持上次状态：

5、页面加载时，读取localStorage中对应键的值，并初始化input的type与data-showing属性为true或false：