如何实现仅接受单个单词的Bootstrap文本框？或输入多词时提示错误

当然可以实现！我来给你两种实用的方案，一种是实时限制用户只能输入单个单词，另一种是在用户输入多个单词时显示错误提示，两种都能完美适配Bootstrap的表单风格：

方案一：实时限制仅输入单个单词 #

这种方案会从根源上避免多个单词的输入，要么直接阻止空格输入，要么实时清除输入的空格：

方式1：阻止空格按键输入 #

通过监听键盘事件，直接禁止用户输入空格：

<div class="mb-3">
  <label for="singleWordInput" class="form-label">单个单词输入框</label>
  <input type="text" class="form-control" id="singleWordInput" placeholder="请输入单个单词">
</div>

<script>
const singleWordInput = document.getElementById('singleWordInput');
// 拦截空格按键，禁止输入
singleWordInput.addEventListener('keydown', function(e) {
  if (e.key === ' ') {
    e.preventDefault();
  }
});
</script>

方式2：实时移除所有空格 #

如果用户粘贴了带空格的内容，这种方式会自动清除所有空格：

singleWordInput.addEventListener('input', function(e) {
  // 用正则匹配所有空格并移除
  this.value = this.value.replace(/\s+/g, '');
});

方案二：输入多个单词时显示错误提示（表单验证） #

如果你希望允许用户输入空格，但在输入多个单词时给出明确的错误提示，可以结合Bootstrap的内置表单验证功能：

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="wordValidationInput" class="form-label">单个单词验证输入框</label>
    <input type="text" class="form-control" id="wordValidationInput" required>
    <div class="invalid-feedback">
      请输入单个单词，不能包含空格！
    </div>
  </div>
  <button class="btn btn-primary" type="submit">提交</button>
</form>

<script>
// 启用Bootstrap表单验证逻辑
(function () {
  'use strict'

  const forms = document.querySelectorAll('.needs-validation')

  Array.from(forms).forEach(form => {
    form.addEventListener('submit', event => {
      const input = document.getElementById('wordValidationInput');
      // 检查输入内容是否包含空格
      if (/\s/.test(input.value)) {
        input.classList.add('is-invalid');
        event.preventDefault();
        event.stopPropagation();
      } else {
        input.classList.remove('is-invalid');
        form.classList.add('was-validated');
      }
    }, false)
  })
})()

// 实时输入校验：用户输入时立刻触发错误提示
const input = document.getElementById('wordValidationInput');
input.addEventListener('input', function() {
  if (/\s/.test(this.value)) {
    this.classList.add('is-invalid');
  } else {
    this.classList.remove('is-invalid');
  }
});
</script>

这段代码会在用户输入空格时，实时显示Bootstrap风格的红色错误提示，提交表单时也会再次校验，确保输入符合要求。

你可以根据自己的需求选择合适的方案，两种都能很好地和Bootstrap的表单系统兼容~

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