Bootstrap Tags Input粘贴值无法完整显示问题求助

问题源于Bootstrap Tags Input默认的事件处理逻辑无法完整识别粘贴的内容，且默认以逗号/空格作为分隔符的规则可能导致多单词标签被错误拆分。以下是针对性的解决方案：

解决方案代码 #

HTML结构（保留原有代码） #

<div class="col-md-8 col-md-offset-2">
  <div class="text-center">
    <h1>Bootstrap Tags Input</h1>
  </div>

  <div class="form-group">
    <label for="city_tag">Please write a tag</label>
    <input type="text" value="Istanbul, Adana, Adiyaman, Afyon, Agri, Aksaray, Ankara" data-role="tagsinput" class="form-control" />
  </div>
</div>

JavaScript自定义处理逻辑 #

$(document).ready(function() {
  // 监听输入框的粘贴事件
  $('input[data-role="tagsinput"]').on('paste', function(e) {
    // 阻止默认粘贴行为，避免组件自动拆分内容
    e.preventDefault();
    
    // 获取剪贴板中的文本内容
    const clipboardData = e.originalEvent.clipboardData || window.clipboardData;
    const pastedText = clipboardData.getData('text');
    
    // 按逗号分割文本，去除每个标签前后空格，过滤空标签
    const tags = pastedText.split(',').map(tag => tag.trim()).filter(tag => tag.length > 0);
    
    // 获取Tags Input实例，批量添加处理后的标签
    const tagsInputInstance = $(this).tagsinput('instance');
    tags.forEach(tag => tagsInputInstance.add(tag));
  });
});

核心说明 #

• 手动捕获粘贴事件，绕过组件默认的分割逻辑，确保完整读取粘贴内容
• 以逗号作为标签分隔符（匹配示例中的格式），支持多单词标签（如"New York"）被识别为单个标签
• 自动过滤空标签，避免无效内容被添加

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