html如何隐藏密码_HTML密码框（type=password）隐藏显示方法-html教程-PHP中文网

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

星夢妙者

发布： 2025-11-18 22:26:02

原创

720人浏览过

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

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

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

1. 基本HTML结构

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

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

登录后复制

2. 使用JavaScript切换类型

通过JavaScript修改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控制按钮样式，或根据状态改变按钮文字。

降重鸟

要想效果好，就用降重鸟。AI改写智能降低AIGC率和重复率。

308

查看详情

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

增强版示例：

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

登录后复制

基本上就这些。核心就是动态切换type属性，不复杂但很实用。注意不要在生产环境中默认显示密码，切换功能应由用户主动触发。

以上就是html如何隐藏密码_HTML密码框（type=password）隐藏显示方法的详细内容，更多请关注php中文网其它相关文章！