首页 > 文章 > 前端

密码框隐藏显示怎么设置

时间：2026-01-16 16:01:29 435浏览收藏

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《HTML密码框如何隐藏显示》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

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

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

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

1. 基本HTML结构

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

&lt;input type=&quot;password&quot; id=&quot;passwordInput&quot; placeholder=&quot;请输入密码&quot;&gt;
<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控制按钮样式，或根据状态改变按钮文字。

增强版示例：

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

&lt;input type=&quot;password&quot; id=&quot;passwordInput&quot; placeholder=&quot;请输入密码&quot;&gt;
<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属性，不复杂但很实用。注意不要在生产环境中默认显示密码，切换功能应由用户主动触发。

到这里，我们也就讲完了《密码框隐藏显示怎么设置》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于html的知识点！

前往漫画官网入口并下载 ➜

html