求可实现密码样式的type=text自定义输入框开源库

适合不同技术栈的开源库 #

• react-password-mask（React项目）：专门解决这类需求——把text输入框渲染成密码框样式，底层还是text类型，完全不影响浏览器自动填充，还支持点击切换显示/隐藏明文。直接用npm install react-password-mask或yarn add react-password-mask安装即可使用。
• vue-password-input（Vue项目）：Vue生态里的轻量组件，基于text输入框实现密码掩码效果，兼容浏览器自动填充逻辑，安装命令npm install vue-password-input，引入后直接在组件中调用即可。
• vanilla-masker（无框架依赖）：原生JS库，轻量灵活，能给普通text输入框添加密码掩码效果，核心是监听输入事件替换显示字符，不改动输入框type，适合纯静态页面或无框架项目，直接引入库文件就能快速实现功能。

若不想依赖库，可自行快速实现 #

几行原生JS代码就能搞定：

1. 准备一个type="text"的输入框，同时用隐藏变量或隐藏输入框保存真实输入值
2. 监听输入框的input事件，每次输入时将输入框显示内容替换为对应长度的圆点（•），真实值存入隐藏变量
3. 表单提交时使用真实值提交，既保证外观为密码框样式，又不影响autofill功能

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