js实现标签盒子

实现标签盒子的基本思路

标签盒子通常用于展示多个标签，允许用户添加、删除或选择标签。以下是一个简单的实现方法：

<div id="tag-container">
  <input type="text" id="tag-input" placeholder="输入标签...">
  <button id="add-tag">添加</button>
  <div id="tags"></div>
</div>

#tag-container {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  max-width: 300px;
}

#tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}

.tag {
  background-color: #e0e0e0;
  padding: 3px 8px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
}

.tag-remove {
  margin-left: 5px;
  cursor: pointer;
}

document.getElementById('add-tag').addEventListener('click', function() {
  const input = document.getElementById('tag-input');
  const tagText = input.value.trim();

  if (tagText) {
    addTag(tagText);
    input.value = '';
  }
});

function addTag(text) {
  const tagsContainer = document.getElementById('tags');
  const tag = document.createElement('div');
  tag.className = 'tag';

  const span = document.createElement('span');
  span.textContent = text;

  const removeBtn = document.createElement('span');
  removeBtn.className = 'tag-remove';
  removeBtn.textContent = '×';
  removeBtn.addEventListener('click', function() {
    tag.remove();
  });

  tag.appendChild(span);
  tag.appendChild(removeBtn);
  tagsContainer.appendChild(tag);
}

支持回车键添加标签

为提升用户体验，可以增加回车键添加标签的功能：

document.getElementById('tag-input').addEventListener('keypress', function(e) {
  if (e.key === 'Enter') {
    document.getElementById('add-tag').click();
  }
});

标签去重功能

防止添加重复标签：

function addTag(text) {
  const existingTags = Array.from(document.querySelectorAll('.tag span'))
    .map(span => span.textContent);

  if (existingTags.includes(text)) {
    alert('标签已存在');
    return;
  }

  // 原有添加标签的代码...
}

获取已添加标签的数据

需要获取当前所有标签时：

function getTags() {
  return Array.from(document.querySelectorAll('.tag span'))
    .map(span => span.textContent);
}

响应式标签盒子

使用现代前端框架如React的实现示例：

function TagBox() {
  const [tags, setTags] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const handleAddTag = () => {
    const trimmed = inputValue.trim();
    if (trimmed && !tags.includes(trimmed)) {
      setTags([...tags, trimmed]);
      setInputValue('');
    }
  };

  const handleRemoveTag = (tagToRemove) => {
    setTags(tags.filter(tag => tag !== tagToRemove));
  };

  return (
    <div className="tag-container">
      <input
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        onKeyPress={(e) => e.key === 'Enter' && handleAddTag()}
      />
      <button onClick={handleAddTag}>添加</button>
      <div className="tags">
        {tags.map(tag => (
          <div key={tag} className="tag">
            <span>{tag}</span>
            <span className="tag-remove" onClick={() => handleRemoveTag(tag)}>×</span>
          </div>
        ))}
      </div>
    </div>
  );
}

可编辑标签功能

实现双击标签编辑的功能：

function makeTagEditable(tagElement) {
  const span = tagElement.querySelector('span');
  const originalText = span.textContent;

  span.contentEditable = true;
  span.focus();

  const handleBlur = () => {
    span.contentEditable = false;
    const newText = span.textContent.trim();
    span.textContent = newText || originalText;
    span.removeEventListener('blur', handleBlur);
  };

  span.addEventListener('blur', handleBlur);
}

// 在addTag函数中为标签添加双击事件
tag.addEventListener('dblclick', function() {
  makeTagEditable(this);
});

这些方法提供了从基础到进阶的标签盒子实现方案，可以根据具体需求进行调整和扩展。