如何实现按回车向input框追加元素？求推荐jQuery库

嘿，这个需求我熟！就是那种输入内容按回车就能添加（甚至变成可视化标签），同时把内容同步到输入字段里的功能对吧？我给你分两种情况讲，还有靠谱的jQuery库推荐～

一、原生jQuery实现（无需额外库） #

1. 纯文本追加到Input Value #

如果只是需要把输入内容用分隔符追加到input的value里，代码非常简单：

HTML结构

<input type="text" id="simpleTagInput" placeholder="输入内容按回车添加">

jQuery代码

$(document).ready(function() {
  $('#simpleTagInput').on('keydown', function(e) {
    // 监听回车键（keyCode 13）
    if (e.keyCode === 13) {
      e.preventDefault(); // 阻止默认的表单提交行为
      const inputContent = $(this).val().trim();
      
      // 避免添加空内容
      if (!inputContent) return;
      
      const currentValue = $(this).val().trim();
      // 用逗号分隔已有内容和新内容
      const newValue = currentValue ? `${currentValue}, ${inputContent}` : inputContent;
      
      $(this).val(newValue);
      $(this).val(''); // 清空输入框，方便继续输入
    }
  });
});

2. 带可视化标签的实现（贴近你示例图的效果） #

如果要像示例图那样显示标签样式，同时把标签值存在隐藏input里（方便表单提交），可以这么写：

HTML结构

<div id="tagContainer" style="border:1px solid #ddd; padding:6px; border-radius:4px; display:inline-block;">
  <!-- 用来展示已添加的标签 -->
  <div id="tagList"></div>
  <!-- 输入标签的文本框 -->
  <input type="text" id="tagInput" placeholder="输入标签按回车" style="border:none; outline:none; width:120px;">
  <!-- 隐藏input，用来存储所有标签值（表单提交时用） -->
  <input type="hidden" id="hiddenTags" name="tags">
</div>

jQuery代码

$(document).ready(function() {
  const $tagList = $('#tagList');
  const $tagInput = $('#tagInput');
  const $hiddenInput = $('#hiddenTags');

  // 监听回车键添加标签
  $tagInput.on('keydown', function(e) {
    if (e.keyCode === 13) {
      e.preventDefault();
      const tagText = $(this).val().trim();
      
      if (!tagText) return; // 跳过空内容

      // 创建标签元素
      const $tag = $(`
        <span style="background:#f0f0f0; padding:3px 8px; border-radius:3px; margin:0 5px 5px 0; display:inline-block;">
          ${tagText}
          <span class="tag-remove" style="margin-left:6px; cursor:pointer; color:#666;">×</span>
        </span>
      `);

      // 添加标签移除事件
      $tag.find('.tag-remove').on('click', function() {
        $tag.remove();
        updateHiddenInput(); // 移除后更新隐藏input的值
      });

      // 把标签添加到列表
      $tagList.append($tag);
      $(this).val(''); // 清空输入框
      updateHiddenInput(); // 更新隐藏input的值
    }
  });

  // 更新隐藏input的标签值（用逗号分隔）
  function updateHiddenInput() {
    const tags = [];
    $tagList.find('span:not(.tag-remove)').each(function() {
      tags.push($(this).text().replace('×', '').trim());
    });
    $hiddenInput.val(tags.join(','));
  }
});

二、推荐的jQuery库 #

如果不想自己写样式和复杂逻辑，这些成熟的库能帮你快速实现更强大的功能：

• Tagify：轻量灵活的标签输入库，支持自定义样式、自动完成、输入验证等，完全兼容jQuery，上手成本低。
• Select2：虽然主打增强下拉选择，但支持标签输入模式，适合需要同时支持预设选项和自定义输入的场景，功能非常全面。
• jQuery Tags Input：经典的轻量标签插件，代码简洁，适合简单的标签需求，文档清晰易懂。

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