寻求支持多标签输入的前端库或示例（含node.js样式参考）

给你几个实用的方案，不管是用第三方库还是原生实现，都能搞定你要的多标签输入功能：

一、轻量标签库推荐 #

这些库开箱即用，只需简单调整样式就能匹配你要的蓝色标签效果：

• Tagify：无依赖轻量级库，默认样式可通过CSS快速改成蓝色标签风格，支持回车/逗号添加标签、点击删除、输入联想（可选），完全满足多标签输入需求。
• Select2：虽主打下拉选择，但配置成标签模式后，能轻松实现多标签输入，样式自定义性极强，可快速调整为蓝色标签样式。
• Bootstrap Tags Input：如果你项目用Bootstrap，这个库适配性极佳，集成成本低，只需修改CSS变量就能改成蓝色标签。

二、原生HTML/CSS/JS实现示例 #

如果不想引入第三方库，自己写基础实现也很简单，以下是适配你需求的代码：

<div class="tag-container">
  <div class="tags"></div>
  <input type="text" class="tag-input" placeholder="输入标签，回车添加">
</div>

.tag-container {
  border: 1px solid #e0e0e0;
  padding: 8px;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  background-color: #165DFF; /* 蓝色标签背景，可按需调整色值 */
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
}

.tag .remove-btn {
  cursor: pointer;
  font-size: 14px;
}

.tag-input {
  border: none;
  outline: none;
  flex: 1;
  min-width: 100px;
  font-size: 14px;
}

const tagContainer = document.querySelector('.tag-container');
const tagsEl = tagContainer.querySelector('.tags');
const inputEl = tagContainer.querySelector('.tag-input');

// 回车触发添加标签
inputEl.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && inputEl.value.trim()) {
    addTag(inputEl.value.trim());
    inputEl.value = '';
  }
});

// 添加标签逻辑（含去重）
function addTag(text) {
  // 避免重复添加相同标签
  if ([...tagsEl.children].some(tag => tag.dataset.tag === text)) return;
  
  const tagEl = document.createElement('div');
  tagEl.className = 'tag';
  tagEl.dataset.tag = text;
  tagEl.innerHTML = `${text} <span class="remove-btn">&times;</span>`;
  
  // 点击删除标签
  tagEl.querySelector('.remove-btn').addEventListener('click', () => {
    tagEl.remove();
  });
  
  tagsEl.appendChild(tagEl);
}

内容的提问来源于stack exchange，提问作者Alexander 'Pantastic' Asmußen