当前位置：首页 > JavaScript

js 实现tag

2026-02-01 23:06:26JavaScript

实现标签功能

在JavaScript中实现标签（Tag）功能通常涉及创建、删除、展示标签以及处理标签相关的事件。以下是几种常见的方法：

创建标签元素

使用DOM操作动态创建标签元素，可以设置样式和内容：

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

添加标签到容器

将创建的标签添加到指定的容器中：

const tagContainer = document.getElementById('tag-container');
function addTagToContainer(text) {
  const tag = createTag(text);
  tagContainer.appendChild(tag);
}

删除标签

为标签添加删除按钮，点击后移除标签：

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

  const deleteButton = document.createElement('span');
  deleteButton.className = 'delete-tag';
  deleteButton.textContent = '×';
  deleteButton.onclick = function() {
    tag.remove();
  };

  tag.appendChild(deleteButton);
  return tag;
}

输入框生成标签

监听输入框事件，按回车或逗号生成标签：

const tagInput = document.getElementById('tag-input');
tagInput.addEventListener('keydown', function(e) {
  if (e.key === 'Enter' || e.key === ',') {
    e.preventDefault();
    const text = tagInput.value.trim();
    if (text) {
      addTagToContainer(text);
      tagInput.value = '';
    }
  }
});

标签样式

通过CSS为标签添加基本样式：

.tag {
  display: inline-block;
  background: #eee;
  padding: 5px 10px;
  margin: 5px;
  border-radius: 3px;
}
.delete-tag {
  margin-left: 5px;
  cursor: pointer;
}

完整示例

结合上述代码的完整HTML示例：

<div id="tag-container"></div>
<input type="text" id="tag-input" placeholder="输入标签，按回车或逗号分隔">
<script>
  // 上述JavaScript代码
</script>
<style>
  /* 上述CSS代码 */
</style>