html如何隐藏密码_HTML密码框（type=password）隐藏显示方法

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

html如何隐藏密码_HTML密码框（type=password）隐藏显示方法

2025-11-18

浏览次数：次

返回列表

答案是通过J*aScript动态切换input的type属性实现密码显示与隐藏。使用type="password"初始隐藏，结合按钮触发togglePassword()函数，在password和text类型间切换，并可更新按钮文本提示状态，确保用户主动控制明文显示。

html如何隐藏密码_html密码框（type=password）隐藏显示方法

HTML中的密码框默认会隐藏输入内容，这是通过type="password"实现的。但有时需要让用户选择是否显示明文密码，比如登录页面的“显示密码”功能。下面介绍如何用HTML、CSS和J*aScript实现密码的隐藏与显示切换。

1. 基本HTML结构

使用input标签，初始类型设为password，并添加一个按钮用于切换显示状态：

<input type="password" id="passwordInput" placeholder="请输入密码">
<button type="button" onclick="togglePassword()">显示/隐藏密码</button>

2. 使用J*aScript切换类型

通过J*aScript修改input的type属性，在password和text之间切换：

<script>
function togglePassword() {
  const passwordInput = document.getElementById('passwordInput');
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';  // 显示明文
  } else {
    passwordInput.type = 'password';  // 隐藏为圆点
  }
}
</script>

3. 添加视觉反馈（可选）

可以加入眼睛图标或文字提示，提升用户体验。例如用CSS控制按钮样式，或根据状态改变按钮文字。

千鹿Pr助手

智能Pr插件，融入众多AI功能和海量素材

128 查看详情千鹿Pr助手

立即学习“前端免费学习笔记（深入）”；

增强版示例：

<style>
.toggle-btn {
  margin-left: 5px;
  cursor: pointer;
  color: #007bff;
  border: none;
  background: none;
}
</style>

<input type="password" id="passwordInput" placeholder="请输入密码">
<button type="button" class="toggle-btn" onclick="togglePassword()" id="toggleBtn">显示</button>

<script>
function togglePassword() {
  const input = document.getElementById('passwordInput');
  const btn = document.getElementById('toggleBtn');
  if (input.type === 'password') {
    input.type = 'text';
    btn.textContent = '隐藏';
  } else {
    input.type = 'password';
    btn.textContent = '显示';
  }
}
</script>