Bootstrap Tokenfield配置'\n'分隔符后复制粘贴功能失效如何解决

• 核心原因是Bootstrap Tokenfield 原生粘贴逻辑存在预处理规则：默认会将剪贴板内容里的所有换行符（含\n、\r、\r\n）、制表符等特殊空白字符统一替换为普通空格，之后才会调用delimiter配置做拆分判断。你在delimiter中配置的\n根本接触不到原始的换行内容，自然无法触发拆分。
• 额外叠加场景：Windows系统下复制的多行文本换行实际为\r\n组合，即使绕过预处理规则，仅配置\n作为分隔符也无法匹配全量换行格式。

方案一：重写粘贴事件预处理（兼容所有Tokenfield版本） #

在初始化Tokenfield后，绑定自定义paste事件，先把剪贴板内的所有换行统一替换为原生支持的分隔符（比如逗号），再走Tokenfield原生拆分逻辑：

// 原有Tokenfield初始化配置
$('#res_pago').tokenfield({
    autocomplete :{
        source: function(request, response){
            $.ajax({
                  type : "POST",
                  url : "api/getResponsablePago",
                  data : {myData: request.term},
                  success : function(result) {
                      console.log(result);
                      var datas = [];
                      if(result.data != undefined){
                          result.data.forEach(element => datas.push({ value: element.responsableID, label: element.responsableID + " - " + element.responsableDes}));
                      }
                      response(datas);
                  }
            });
        },
        delay: 800,
    },
    showAutocompleteOnFocus: true,
    delimiter: [',','\n']
});

// 新增自定义粘贴处理逻辑
$('#res_pago').on('paste', function(e) {
  // 阻止默认粘贴逻辑
  e.preventDefault();
  // 获取剪贴板纯文本内容
  const clipboardText = (e.originalEvent.clipboardData || window.clipboardData).getData('text');
  // 兼容全量换行格式，统一替换为逗号分隔（可根据实际需求替换为其他原生支持的分隔符）
  const processedText = clipboardText.replace(/\r\n|\r|\n/g, ',');
  // 插入处理后的内容，触发Tokenfield原生拆分
  document.execCommand('insertText', false, processedText);
});

方案二：使用内置paster配置（适配新版Tokenfield） #

如果你使用的是支持paster配置项的新版Bootstrap Tokenfield，可直接在初始化配置中添加自定义粘贴处理器，无需额外绑定事件：

$('#res_pago').tokenfield({
    autocomplete :{
        source: function(request, response){
            $.ajax({
                  type : "POST",
                  url : "api/getResponsablePago",
                  data : {myData: request.term},
                  success : function(result) {
                      console.log(result);
                      var datas = [];
                      if(result.data != undefined){
                          result.data.forEach(element => datas.push({ value: element.responsableID, label: element.responsableID + " - " + element.responsableDes}));
                      }
                      response(datas);
                  }
            });
        },
        delay: 800,
    },
    showAutocompleteOnFocus: true,
    delimiter: [',','\n'],
    // 新增自定义粘贴处理
    paster: function(e) {
      const rawText = e.originalEvent.clipboardData.getData('text');
      // 兼容全量换行格式做替换
      return rawText.replace(/\r\n|\r|\n/g, ',');
    }
});

注意：如果你的粘贴内容本身包含逗号，可将替换后的分隔符替换为你确定不会在内容中出现的特殊字符，同时将该字符临时加入delimiter配置即可。

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