如何为Bootstrap 5的Form Floating和Form Control输入框添加x清除按钮

问题原因 #

你的代码存在3个核心问题：

• 没有给表单容器设置相对定位约束，也没有给关闭按钮配置绝对定位样式，按钮无法固定在输入框右侧
• 没有添加交互逻辑：既没有监听输入框内容变化来控制关闭按钮的显隐与可用状态，也没有实现点击清空输入的功能
• 普通表单场景下关闭按钮放置在input元素之前，结构顺序不符合布局要求

完整实现代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<style>
/* 通用关闭按钮样式 */
.form-clear-btn {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  z-index: 10;
}
/* 适配浮动表单的关闭按钮位置，避免挡住上浮的label */
.form-floating .form-clear-btn {
  top: 2rem;
}
/* 输入框预留右侧按钮空间，避免文字被遮挡 */
.form-control {
  padding-right: 2.5rem;
}
</style>
</head>
<body>
<!-- 浮动表单 -->
<div class="form-floating mb-3 position-relative">
  <input type="email" class="form-control form-clear-input" id="floatingInput" placeholder="name@example.com">
  <button type="button" class="btn-close form-clear-btn" disabled aria-label="Close"></button>
  <label for="floatingInput">Email address</label>
</div>
<!-- 普通表单 -->
<div class="mb-3 position-relative">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control form-clear-input" id="exampleFormControlInput1" placeholder="name@example.com">
  <button type="button" class="btn-close form-clear-btn" disabled aria-label="Close"></button>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<script>
// 监听所有带清空功能的输入框
document.querySelectorAll('.form-clear-input').forEach(input => {
  const clearBtn = input.parentElement.querySelector('.form-clear-btn')
  // 输入内容变化时控制按钮显隐
  input.addEventListener('input', () => {
    const hasValue = input.value.trim().length > 0
    clearBtn.style.display = hasValue ? 'block' : 'none'
    clearBtn.disabled = !hasValue
  })
  // 点击按钮清空输入
  clearBtn.addEventListener('click', () => {
    input.value = ''
    clearBtn.style.display = 'none'
    clearBtn.disabled = true
    input.focus()
    // 手动触发input事件，兼容其他绑定在输入框上的监听逻辑
    input.dispatchEvent(new Event('input'))
  })
})
</script>
</body>
</html>

关键实现说明 #

• 用Bootstrap自带的position-relative类给表单容器设置相对定位，作为关闭按钮绝对定位的参照父级
• 给关闭按钮单独设置定位样式，分别适配普通表单和浮动表单的垂直位置，避免挡住浮动label
• 给输入框设置右侧内边距，防止输入的文字被关闭按钮遮挡
• JS逻辑统一处理输入监听、按钮显隐、点击清空的交互，可复用在所有需要清空功能的输入框上

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