如何在保持HTML input类型为text时隐藏输入框内的密码内容

要在保持input类型为text的前提下实现密码掩码效果，最稳妥的方案是用叠层思路实现，不会破坏原生输入交互，兼容性也足够好。

核心逻辑 #

• 准备两个叠放的元素：上层是真实的type="text"输入框，负责接收用户输入、存储真实密码值；下层是普通展示元素，负责渲染掩码内容。
• 给上层真实输入框设置透明文本样式，让用户输入的明文不可见，只保留正常的光标显示，保证所有原生输入交互（光标定位、选中、复制粘贴、输入法输入）完全正常。
• 监听输入框的输入事件，根据当前真实值的长度，在下层展示层渲染对应数量的掩码字符（*或者●都可以）。

避坑提醒 #

不要用两类有明显缺陷的方案：

1. 不要用-webkit-text-security这类浏览器私有属性，仅少部分webkit内核浏览器支持，兼容性极差，移动端适配坑多。
2. 不要用拦截键盘事件、手动替换输入框内容为星号的方案，这类方案会破坏原生输入逻辑：中文输入法输入异常、光标定位错乱、快捷键/右键粘贴捕获失效，维护成本极高。

最简实现代码 #

<style>
.pwd-input-container {
  position: relative;
  width: 240px;
  height: 36px;
}
/* 下层掩码展示层 */
.pwd-mask-layer {
  position: absolute;
  inset: 0;
  padding: 0 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  line-height: 36px;
  font-size: 14px;
  letter-spacing: 2px;
  box-sizing: border-box;
}
/* 上层真实输入框，透明叠放 */
.real-text-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 14px;
  background: transparent;
  color: transparent; /* 隐藏明文 */
  caret-color: #333; /* 保留光标可见 */
  box-sizing: border-box;
}
</style>

<div class="pwd-input-container">
  <div class="pwd-mask-layer"></div>
  <input type="text" class="real-text-input" id="pwdInput">
</div>

<script>
const maskLayer = document.querySelector('.pwd-mask-layer')
const pwdInput = document.querySelector('#pwdInput')

pwdInput.addEventListener('input', () => {
  const realValue = pwdInput.value
  // 渲染对应长度的星号掩码
  maskLayer.textContent = '*'.repeat(realValue.length)
  // realValue 即为用户输入的真实密码，可直接用于表单提交
})
</script>

方案优势 #

• 完全保留type="text"输入框的所有原生行为，无交互bug。
• 掩码样式完全自定义，不受浏览器原生控件限制。
• 兼容所有主流桌面、移动端浏览器，无适配风险。

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