Bootstrap 5如何为input-group添加图标？替代已移除的input-group-addon

核心变化说明 #

• Bootstrap 5 移除了input-group-addon，统一使用input-group-text作为输入组的附加元素容器
• Bootstrap 5 不再内置Glyphicon图标，推荐使用官方的Bootstrap Icons，需提前引入该图标库

完整实现代码 #

HTML 结构

<div class="row">
  <label class="col-sm-3 col-form-label" for="idPassphrase">Passphrase</label>
  <div class="col-sm-6">
    <div class="input-group">
      <input id="idPassphrase" class="form-control form-control-sm" type="password" autocomplete="off">
      <span class="input-group-text cursor-pointer">
        <i class="bi bi-eye-slash"></i>
      </span>
    </div>
  </div>
</div>

基础样式（可选）

给图标添加指针样式，提示可交互：

.cursor-pointer {
  cursor: pointer;
}

JavaScript 切换逻辑

实现点击图标切换密码显示/隐藏状态：

const passwordInput = document.getElementById('idPassphrase');
const toggleIconWrap = document.querySelector('.input-group-text');
const toggleIcon = toggleIconWrap.querySelector('i');

toggleIconWrap.addEventListener('click', function() {
  // 切换输入框的类型
  const currentType = passwordInput.getAttribute('type');
  const newType = currentType === 'password' ? 'text' : 'password';
  passwordInput.setAttribute('type', newType);
  
  // 切换对应图标
  if (newType === 'text') {
    toggleIcon.classList.replace('bi-eye-slash', 'bi-eye');
  } else {
    toggleIcon.classList.replace('bi-eye', 'bi-eye-slash');
  }
});

关键调整点 #

1. 容器类替换：将原Bootstrap 3的input-group-addon替换为Bootstrap 5的input-group-text
2. 响应式与表单类更新：col-xs-*改为col-sm-*（Bootstrap 5中xs断点已合并到默认类），control-label改为col-form-label，input-xs改为form-control-sm
3. 图标替换：用Bootstrap Icons的bi-eye-slash（隐藏状态）和bi-eye（显示状态）替代原Glyphicon图标

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