README

Bootstrap Show Password Toggle

Bootstrap表单的显示密码文本切换器

原生外观的UI
纯JavaScript，无依赖
Base64编码的SVG图标（无需外部图像或字体）
对禁用JavaScript的浏览器的优雅降级
支持Bootstrap 4和5
支持暗黑模式（仅Bootstrap 5）
仅1KB压缩

快速开始

下载最新版本
克隆仓库 git clone https://github.com/coliff/bootstrap-show-password-toggle.git
使用npm安装 npm install bootstrap-show-password-toggle
使用yarn安装 yarn add bootstrap-show-password-toggle

用法

在您的CSS中包含show-password-toggle.min.css
将密码输入包裹在input-group div中，如下所示

<div class="input-group">
  <input type="password" class="form-control rounded" required>
  <button id="toggle-password" type="button" class="d-none"
    aria-label="Show password as plain text. Warning: this will display your password on the screen.">
  </button>
</div>

在表单后加载show-password-toggle.min.js

强烈建议为密码输入添加属性：spellcheck="false"，autocorrect="off"和autocapitalize="off"，这样当密码以纯文本形式显示时，输入就不会自动更正、大写或拼写检查（以避免下面的红色波浪线）。

您还应该添加name="current-password"和autocomplete="current-password"以帮助浏览器自动完成表单。

演示

浏览器支持

与Bootstrap支持的所有浏览器兼容兼容的浏览器

常见问题解答

问题： 我能否更改显示密码的图标？

答案：是的，您可以通过替换.input-password[type="password"]的Base64编码背景图像来更改显示的图标。建议使用SVG。

已知问题

如果浏览器自动填充密码输入，则用户代理将应用background-image: none !important。
密码输入需要使用required属性。这是为了在输入为空时不在背景图像中显示（如果浏览器支持:blank伪选择器那就太好了！）

致谢

MDO和Bootstrap团队为图标提供支持
Google的Sam Dutton，从《登录表单最佳实践》文章中获取了灵感和初始JavaScript
BrowserStack为我们提供了基础设施，使我们能够在真实浏览器中进行测试

coliff / bootstrap-show-password-toggle

维护者

详细信息