如何使用 Bootstrap-icons 在表单中切换密码可见性？

Bootstrap-icons是Bootstrap官方维护的一组图标集，可以在web应用程序中快速实现各种功能。在表单中切换密码可见性是一个常见的功能，在本文中，我将介绍如何使用Bootstrap-icons实现这个功能。

方法

1. 首先，我们需要在HTML文件头部引入Bootstrap-icons库的CSS文件和图标字体文件。可以通过以下代码来实现：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons%401.6.0/font/bootstrap-icons.css">

2. 接下来，在表单密码字段后面添加眼睛图标和隐藏图标：

<input type="password" id="password-field">
<i class="bi bi-eye" id="toggle-password"></i>
<i class="bi bi-eye-slash" id="toggle-password"></i>

可以看到，我们使用了Bootstrap-icons库中的 bi bi-eye 和 bi bi-eye-slash 图标来实现切换密码可见性的功能。此外，我们将眼睛图标和隐藏图标的 id 属性设置为 toggle-password，以便在脚本中使用它们。

3. 在脚本中添加以下代码：

const passwordField = document.querySelector('#password-field');
const togglePassword = document.querySelector('#toggle-password');

togglePassword.addEventListener('click', function (e) {
  // 切换密码可见性
  const type = passwordField.getAttribute('type') === 'password' ? 'text' : 'password';
  passwordField.setAttribute('type', type);
  // 切换图标
  this.classList.toggle('bi-eye');
  this.classList.toggle('bi-eye-slash');
});

在这里，我们通过 querySelector 方法获取 password-field 和 toggle-password 元素，并为 toggle-password 元素添加一个点击事件监听器。当点击元素时，我们首先通过 getAttribute 方法获取密码字段的 type 属性。如果它是 password，则将其更改为 text，否则将其更改为 password。接下来，我们使用 classList.toggle 方法在图标元素之间切换 bi-eye 和 bi-eye-slash 类。

结论

使用Bootstrap-icons，我们可以轻松实现表单中切换密码可见性的功能。我们只需要几行代码就可以为网站用户提供更好的用户体验。