自定义jQuery标签组件：聚焦输入框后标签消失问题求助

背景 #

原本使用Bootstrap Tags Input实现多值录入，但该组件默认将逗号和回车键作为分隔符，而业务需求需要在内容中包含逗号，因此移除组件，改用jQuery实现自定义标签功能。

自定义实现代码 #

jQuery 逻辑 #

$('#addQuestionInput').on('keydown', function(event){
  const value = $(this).val().trim();
  if (event.key === 'Enter') {
    event.preventDefault();
    if (value !== '') {
      addTag(value);
      $(this).val('');
    }
  }
});

function addTag(tagText) {
  const $tagContainer = $('#addQuestionInputForm');
  // 检查是否已存在相同标签
  if (!$tagContainer.find('.tag:contains("' + tagText + '")').length) {
    const $tagElement = $('<span class="tag"></span>').text(tagText);
    $tagContainer.append($tagElement);
  }
}

对应的HTML结构 #

<form class="timeForm" id="addQuestionInputForm">
  <div class="ALLINPUTFORM">
    <div class="addQuestionInputDiv" id="addQuestionInputDiv">
      <input class="addQuestionInput" type="text" id="addQuestionInput" name="date" placeholder="What is react, What is java ( Separate Question Using Commas ) and What is C++">
      <span class="addQuestionInputMessage"></span>
    </div>
  </div>
</form>

遇到的问题 #

• 聚焦#addQuestionInput输入框时，已添加的标签会消失，点击表单区域外恢复正常
• 无法获取输入框的值，导致提交功能失效

原Bootstrap Tags Input代码（已注释） #

// $('#addQuestionInput').tagsinput();
// $('.bootstrap-tagsinput input').on('paste', function(e) {
//         e.preventDefault();
//          var pastedText = (e.originalEvent || e).clipboardData.getData('text/plain');
//          var sanitizedText = escapeSpecialCharacters(pastedText);
//          $(this).val(sanitizedText);
//         $(this).trigger('input');
// });
// $('.bootstrap-tagsinput input').on('keyup', function(e) {
//   e.preventDefault();
//   var pastedText = e.currentTarget.value
//   var sanitizedText = escapeSpecialCharacters(pastedText);
//   $(this).val(sanitizedText);
//   $(this).trigger('input');
// });
// function escapeSpecialCharacters(text) {
//        return text.replace(/"/g, "'")
//    }

问题解决 #

1. 聚焦输入框标签消失问题 #

原因分析

标签被追加到表单根节点#addQuestionInputForm，若表单存在动态重新渲染的逻辑（比如聚焦时重复生成HTML结构），会覆盖已添加的标签；同时contains选择器对特殊字符处理存在隐患，可能导致标签重复添加或误判。

修复方案

• 将标签容器改为输入框所在的#addQuestionInputDiv，避免被表单重渲染覆盖
• 改用filter方法精确匹配标签文本，替代contains选择器
• 调整标签插入位置，放在输入框前方/后方，布局更合理

修改后的addTag函数：

function addTag(tagText) {
  const $tagContainer = $('#addQuestionInputDiv');
  // 精确匹配标签文本，避免contains的大小写/特殊字符问题
  const tagExists = $tagContainer.find('.tag').filter(function() {
    return $(this).text().trim() === tagText.trim();
  }).length > 0;

  if (!tagExists) {
    const $tagElement = $('<span class="tag"></span>').text(tagText);
    // 在输入框前插入标签，可根据布局调整为after()
    $('#addQuestionInput').before($tagElement);
  }
}

2. 提交时无法获取值的问题 #

原因分析

业务需求是提交所有已添加的标签内容，而非输入框当前值，原逻辑未明确收集标签数据的流程；若输入框为动态生成，直接获取值也可能存在DOM引用问题。

修复方案

提交表单时，统一收集所有标签的文本内容，同时兼容输入框中未提交的内容：

$('#addQuestionInputForm').on('submit', function(e) {
  e.preventDefault();
  // 收集所有标签文本
  const tags = [];
  $('.tag').each(function() {
    tags.push($(this).text().trim());
  });
  // 加入输入框中未提交的内容
  const inputValue = $('#addQuestionInput').val().trim();
  if (inputValue) {
    tags.push(inputValue);
  }
  // 这里执行提交逻辑，比如AJAX请求
  console.log('待提交的内容集合:', tags);
  // $.post('/api/submit', { questions: tags }, function(res) { ... });
});

额外优化：添加标签删除功能 #

给每个标签增加删除按钮，提升用户体验：

function addTag(tagText) {
  const $tagContainer = $('#addQuestionInputDiv');
  const tagExists = $tagContainer.find('.tag').filter(function() {
    return $(this).text().trim() === tagText.trim();
  }).length > 0;

  if (!tagExists) {
    // 组装带删除按钮的标签元素
    const $tagElement = $('<span class="tag"></span>').html(`${tagText} <button class="tag-remove" style="border:none;background:transparent;cursor:pointer;margin-left:8px;">×</button>`);
    $('#addQuestionInput').before($tagElement);
    // 绑定删除事件
    $tagElement.find('.tag-remove').on('click', function() {
      $(this).parent('.tag').remove();
    });
  }
}

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