Question

我正在创建一个select2输入，允许用户粘贴csv数据并将其转换为标记。我的问题是，我希望能够使用垂直复制的数据创建标签，因为select2使用<input type="text" />元素将换行符转换为空格我不确定是否可行。我想继续使用select2，但如果绝对没办法，我可以选择替代方案。

Select2定义：

$('#search_tags').select2({
    tags: [],
    tokenSeparators: [",", "\t", "\n"],
    dropdownCssClass: 'select2-hidden',
    placeholder: "Paste Here",
    formatNoMatches: function() {return '';}
});

HTML：

<input id="search_tags" type="hidden" style="width:100%;" tabindex="-1">

Answer 1

问题是，正如您所建议的那样，粘贴的换行符已经被select2代码开始形成标记的时间所取代。这就是为什么自定义tokenizer function无法帮助我们的原因。

因此，诀窍是在粘贴期间捕获换行符并用其他分隔符之一替换它们。确保在.select2(...)代码之后执行此操作：

$('.select2-input').on('paste', function(e) {
    //get the raw pasted text
    var data = e.originalEvent.clipboardData.getData('Text');
    //replace newlines by tabs and add to conent
    $(this).val($(this).val() + '\t' + data.replace(/\n/g, '\t') + '\t');
    //prevent normal paste behaviour
    return false;
});

您可以在this fiddle中试用。

注意：我不太确定现代浏览器对e.originalEvent.clipboardData.getData('Text')的普遍支持。我已经看到IE9需要window.clipboardData.getData("Text")的建议，因此您可能需要添加检查以查看浏览器支持哪些属性。

如何使用带有换行符tokenSeparator的Select2标签？

1 个答案: