当前位置：首页 > JavaScript

js 实现tag

2026-04-06 16:10:18JavaScript

实现 Tag 功能的 JavaScript 方法

动态生成 Tag 元素

使用 DOM 操作动态创建 Tag 元素并添加到页面中。以下是一个基础实现：

function createTag(text) {
  const tag = document.createElement('span');
  tag.className = 'tag';
  tag.textContent = text;

  const closeBtn = document.createElement('span');
  closeBtn.className = 'tag-close';
  closeBtn.innerHTML = '&times;';
  closeBtn.onclick = () => tag.remove();

  tag.appendChild(closeBtn);
  return tag;
}

// 使用示例
document.getElementById('tag-container').appendChild(createTag('JavaScript'));

输入框生成 Tag

结合输入框实现交互式 Tag 添加功能：

js 实现tag

const input = document.getElementById('tag-input');
input.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && input.value.trim()) {
    const tag = createTag(input.value.trim());
    document.getElementById('tag-container').appendChild(tag);
    input.value = '';
  }
});

样式设计

为 Tag 添加基本样式：

js 实现tag

.tag {
  display: inline-flex;
  align-items: center;
  background: #e0e0e0;
  border-radius: 16px;
  padding: 4px 12px;
  margin: 4px;
  font-size: 14px;
}

.tag-close {
  margin-left: 8px;
  cursor: pointer;
  user-select: none;
}

数据存储与获取

存储 Tag 数据并支持从数组生成：

// 从数组生成 Tags
function renderTags(tags) {
  const container = document.getElementById('tag-container');
  container.innerHTML = '';
  tags.forEach(text => container.appendChild(createTag(text)));
}

// 获取当前所有 Tags
function getTags() {
  return Array.from(document.querySelectorAll('.tag'))
    .map(tag => tag.firstChild.textContent.trim());
}

高级功能扩展

实现 Tag 的拖拽排序功能：

let draggedTag = null;

document.querySelectorAll('.tag').forEach(tag => {
  tag.draggable = true;

  tag.addEventListener('dragstart', () => {
    draggedTag = tag;
    setTimeout(() => tag.style.opacity = '0.4', 0);
  });

  tag.addEventListener('dragend', () => {
    setTimeout(() => tag.style.opacity = '1', 0);
    draggedTag = null;
  });
});

document.getElementById('tag-container').addEventListener('dragover', e => {
  e.preventDefault();
  const afterElement = getDragAfterElement(e.clientX);
  if (afterElement) {
    afterElement.parentNode.insertBefore(draggedTag, afterElement);
  } else {
    container.appendChild(draggedTag);
  }
});

function getDragAfterElement(x) {
  const tags = [...document.querySelectorAll('.tag:not(.dragging)')];
  return tags.find(tag => {
    const rect = tag.getBoundingClientRect();
    return x < rect.left + rect.width / 2;
  });
}

这些方法提供了从基础到高级的 Tag 实现方案，可以根据具体需求进行组合或扩展。