jquery - jQuery标签输入不会在粘贴输入时自动创建标签

我正在使用jquery.tagsinput，并希望能够粘贴用逗号或空格分隔的电子邮件地址列表。使用类似https://github.com/xoxco/jQuery-Tags-Input/issues/22这样的东西，但是直到我按Enter才添加它们-尝试触发按键Enter事件，但是它不起作用。也不会有模糊事件的运气（如下所示）。有任何想法吗？

Flat-UI标记基于此库，我正在尝试实现非常相似的行为。

var tidyTags = function(e) {
  var tags = (e.tags).split(/[ ,]+/);
  var target = $(e.target);

  for (var i = 0, z = tags.length; i<z; i++) {
      var tag = $.trim(tags[i]);
      if (!target.tagExist(tag)) {
          target.addTag(tag);
      }
  }
  $('#' + target[0].id + '_tag').trigger('focus');

  //This doesn't work.
  target.blur();

};

$("#tagsinput").tagsInput({
    onAddTag : function(tag){
      if(tag.indexOf(',') > 0) {
          tidyTags({target: '#tagsinput', tags : tag});
      }
    },
});

最佳答案

好了，终于找到了解决方案：

DEMO HERE

只需在粘贴时将监听器添加到您的textbox中，并且在初始化过程中不要设置onAddTag即可，只需对其进行如下调用即可：

$("#tagsinput").tagsInput();//Initialization

$("#tagsinput_tag").on('paste',function(e){
    var element=this;
    setTimeout(function () {
        var text = $(element).val();
        var target=$("#tagsinput");
        var tags = (text).split(/[ ,]+/);
        for (var i = 0, z = tags.length; i<z; i++) {
              var tag = $.trim(tags[i]);
              if (!target.tagExist(tag)) {
                    target.addTag(tag);
              }
              else
              {
                  $("#tagsinput_tag").val('');
              }
         }
    }, 0);
});

需要注意的几点：


paste方法仅在Firefox中选择文本时才会触发
tagsinput将隐藏您的#tagsinput文本框，并添加自己的input文本框，因此您需要在paste文本框上调用#tagsinput_tag事件，元素的结构如下图所示：