如何在单个输入框中输入多个邮箱？无需jQuery或外部插件实现

不用任何外部插件或jQuery，我们可以通过原生HTML/CSS/JavaScript实现类似bootstrap-tagsinput的多邮箱输入功能，核心是用一个容器管理已输入的邮箱标签，配合输入框实时处理输入内容，同时维护一个隐藏字段用于表单提交。

实现步骤 #

1. HTML结构

创建包含标签容器、输入框和隐藏字段的基础结构：

<div class="email-input-container">
  <div class="email-tags" id="emailTags"></div>
  <input type="text" id="emailInput" placeholder="输入邮箱地址，按回车或逗号确认">
  <input type="hidden" id="emailsHidden" name="emails">
</div>

2. CSS样式

模拟标签输入的视觉效果，优化交互体验：

.email-input-container {
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  padding: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  min-height: 2.5rem;
}

.email-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.email-tag {
  background-color: #0d6efd;
  color: white;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.email-tag .remove-btn {
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
}

#emailInput {
  border: none;
  outline: none;
  flex: 1;
  min-width: 120px;
  padding: 0.25rem 0;
}

.email-input-container:focus-within {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

3. JavaScript逻辑

处理输入验证、标签添加/删除，同步隐藏字段的值：

const emailTagsContainer = document.getElementById('emailTags');
const emailInput = document.getElementById('emailInput');
const emailsHidden = document.getElementById('emailsHidden');

// 邮箱格式验证正则
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

// 更新隐藏字段的邮箱列表
function updateHiddenEmails() {
  const emails = Array.from(emailTagsContainer.querySelectorAll('.email-tag'))
    .map(tag => tag.dataset.email);
  emailsHidden.value = emails.join(',');
}

// 添加邮箱标签
function addEmailTag(email) {
  if (!emailRegex.test(email)) {
    alert('请输入有效的邮箱地址');
    return;
  }
  // 检查是否已存在该邮箱
  const existingTags = Array.from(emailTagsContainer.querySelectorAll('.email-tag'));
  if (existingTags.some(tag => tag.dataset.email === email)) {
    alert('该邮箱已添加');
    return;
  }

  const tagElement = document.createElement('div');
  tagElement.className = 'email-tag';
  tagElement.dataset.email = email;
  tagElement.innerHTML = `
    <span>${email}</span>
    <span class="remove-btn">&times;</span>
  `;

  // 添加删除事件
  tagElement.querySelector('.remove-btn').addEventListener('click', () => {
    tagElement.remove();
    updateHiddenEmails();
  });

  emailTagsContainer.appendChild(tagElement);
  emailInput.value = '';
  updateHiddenEmails();
}

// 监听输入框按键事件
emailInput.addEventListener('keyup', (e) => {
  const inputValue = emailInput.value.trim();
  // 按回车或逗号时添加标签
  if ((e.key === 'Enter' || e.key === ',') && inputValue) {
    e.preventDefault();
    addEmailTag(inputValue.replace(',', '')); // 移除输入的逗号
  }
});

// 输入框失焦时，若有内容则添加标签
emailInput.addEventListener('blur', () => {
  const inputValue = emailInput.value.trim();
  if (inputValue) {
    addEmailTag(inputValue);
  }
});

关键功能说明 #

• 邮箱验证：通过正则表达式检查输入内容格式，过滤无效邮箱。
• 标签管理：已添加的邮箱以标签形式展示，点击标签右侧的×即可删除。
• 触发方式：支持按回车键、逗号键确认添加，或输入框失焦时自动添加有效内容。
• 表单兼容：隐藏字段emails会实时同步所有已添加的邮箱，表单提交时可直接获取逗号分隔的邮箱列表。

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