如何在textarea输入时，按空格键为已输入单词动态加样式实现标签效果？

原生<textarea>不支持为局部文本设置自定义样式，因此采用「视觉容器+输入框」的模拟方案，实现按空格生成带样式标签的效果，和主流标签输入组件逻辑完全一致。

1. HTML 结构 #

<div class="tag-input-container" id="tagInput">
  <input type="text" class="tag-input" placeholder="输入单词按空格生成标签">
</div>

2. CSS 样式 #

/* 容器样式 */
.tag-input-container {
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-height: 38px;
  cursor: text;
}

/* 标签样式，可按需修改背景、边框等参数 */
.tag-item {
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
  border-radius: 4px;
  padding: 2px 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
}

/* 标签删除按钮 */
.tag-close {
  cursor: pointer;
  color: #666;
  font-size: 12px;
}

/* 输入框样式 */
.tag-input {
  border: none;
  outline: none;
  flex: 1;
  min-width: 120px;
  padding: 4px;
  font-size: 14px;
}

3. JS 交互逻辑 #

const tagInputContainer = document.getElementById('tagInput');
const tagInput = tagInputContainer.querySelector('.tag-input');

// 监听键盘事件
tagInput.addEventListener('keydown', (e) => {
  // 按下空格键生成标签
  if (e.code === 'Space') {
    e.preventDefault();
    const inputValue = tagInput.value.trim();
    if (!inputValue) return;

    // 可选：禁止重复标签，不需要可删除本段逻辑
    const existingTags = Array.from(tagInputContainer.querySelectorAll('.tag-item'))
      .map(item => item.dataset.tag);
    if (existingTags.includes(inputValue)) {
      tagInput.value = '';
      return;
    }

    // 生成标签节点
    const tagItem = document.createElement('div');
    tagItem.className = 'tag-item';
    tagItem.dataset.tag = inputValue;
    tagItem.innerHTML = `${inputValue}<span class="tag-close">×</span>`;

    // 绑定标签删除事件
    tagItem.querySelector('.tag-close').addEventListener('click', () => {
      tagItem.remove();
    });

    // 插入标签到输入框前
    tagInputContainer.insertBefore(tagItem, tagInput);
    tagInput.value = '';
  }

  // 按下退格键且输入框为空时，删除最后一个标签
  if (e.code === 'Backspace' && !tagInput.value) {
    const lastTag = tagInputContainer.querySelector('.tag-item:last-child');
    lastTag?.remove();
  }
});

// 点击容器自动聚焦输入框
tagInputContainer.addEventListener('click', () => {
  tagInput.focus();
});

常用拓展功能 #

• 获取所有已输入的标签：

const allTags = Array.from(document.querySelectorAll('.tag-item')).map(item => item.dataset.tag);

• 限制标签最大数量：在生成标签前判断已存在的标签长度，超过阈值则终止生成逻辑即可。
• 调整标签样式：直接修改.tag-item的CSS属性即可适配你的设计规范。

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