如何复刻Gmail收件人（To）字段的原子化不可分割元素功能？

嘿，这个需求太常见了！Gmail那种把每个邮箱地址做成原子化可删除单元的交互，确实比纯文本输入好用太多。你不用从零开始手动写所有按键逻辑，已经有不少成熟的方案可以直接用，或者参考它们的思路：

一、用现成的UI组件库（最简便） #

这类库已经帮你封装好了所有复杂的交互，包括原子化标签的创建、退格删除整个单元、自动补全对接，甚至样式都帮你搞定了，推荐两个最贴合的：

1. Tagify #

这是专门为标签/原子化输入场景设计的库，完美匹配你的需求：

• 自动将输入的内容转成独立的标签元素（就是你说的div/span单元）
• 退格键在输入框为空时自动删除最后一个标签
• 支持自定义标签的样式和内容（比如添加头像、邮箱别名）
• 可以轻松对接自动补全逻辑（你只需要提供数据源）

基本用法非常简单，几行代码就能搞定：

<input id="recipient-input" placeholder="添加收件人...">
<script>
  // 初始化Tagify
  const tagify = new Tagify(document.getElementById('recipient-input'), {
    pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, // 邮箱格式校验
    delimiters: ',| ', // 用逗号或空格触发标签创建
    backspace: 'edit', // 退格直接删除整个标签
    placeholder: '输入邮箱地址...'
  });

  // 如果要对接自动补全，只需要配置suggestions选项
  // tagify.settings.suggestions = { data: ['user1@example.com', 'user2@example.com'] };
</script>

2. Select2（标签模式） #

虽然Select2主要是下拉选择组件，但它的标签模式完全可以用来做收件人输入：

• 支持输入转标签，退格删除整个标签
• 内置自动补全功能，适配各种数据源
• 样式可定制，能轻松改成Gmail的风格

二、原生实现思路（不用第三方库） #

如果不想引入外部库，也可以用「容器+隐藏输入框」的方案，比直接用contenteditable可控得多（毕竟contenteditable的光标、选中行为在不同浏览器里坑太多）：

核心思路是：

• 用一个div作为容器，里面放动态生成的邮箱标签和一个小的输入框（始终在容器最后）
• 监听输入框的按键事件：回车/逗号时，把输入内容转成邮箱标签；退格且输入框为空时，删除最后一个标签
• 邮箱标签可以添加点击删除的按钮，提升用户体验

简单实现的代码示例：

<!-- 容器 -->
<div id="email-container" style="border: 1px solid #ddd; border-radius: 4px; padding: 8px; min-height: 32px; display: flex; flex-wrap: wrap; gap: 6px;">
  <!-- 动态生成的邮箱标签会放在这里 -->
  <input 
    type="text" 
    id="email-input" 
    style="flex: 1; border: none; outline: none; padding: 4px; min-width: 120px;"
    placeholder="添加收件人..."
  >
</div>

<script>
  const container = document.getElementById('email-container');
  const input = document.getElementById('email-input');

  // 处理标签创建（回车/逗号触发）
  input.addEventListener('keydown', (e) => {
    const triggerKeys = ['Enter', ','];
    if (triggerKeys.includes(e.key)) {
      e.preventDefault();
      const email = input.value.trim();
      // 简单的邮箱格式校验
      const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      if (email && emailRegex.test(email)) {
        createEmailTag(email);
        input.value = '';
      }
    }

    // 处理退格删除最后一个标签
    if (e.key === 'Backspace' && input.value === '') {
      const lastTag = container.querySelector('.email-tag:last-child');
      if (lastTag) {
        container.removeChild(lastTag);
      }
    }
  });

  // 创建邮箱标签元素
  function createEmailTag(email) {
    const tag = document.createElement('span');
    tag.className = 'email-tag';
    tag.style.display = 'inline-block';
    tag.style.background = '#eaf1fb';
    tag.style.padding = '4px 8px';
    tag.style.borderRadius = 4;
    tag.style.fontSize = '14px';
    
    // 邮箱文本
    const text = document.createTextNode(email);
    tag.appendChild(text);

    // 删除按钮
    const closeBtn = document.createElement('span');
    closeBtn.textContent = '×';
    closeBtn.style.marginLeft = '6px';
    closeBtn.style.cursor = 'pointer';
    closeBtn.style.color = '#666';
    closeBtn.addEventListener('click', () => container.removeChild(tag));
    tag.appendChild(closeBtn);

    // 插入到输入框前面
    container.insertBefore(tag, input);
  }
</script>

为什么不推荐用contenteditable？ #

你观察得很对，Gmail确实没有用contenteditable，因为这个属性的原生行为太不可控了：不同浏览器对光标位置、选中内容的处理差异很大，而且很容易出现用户不小心编辑标签内容的情况（破坏原子化的需求）。用容器+输入框的方案，或者现成的库，能避开这些坑。

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