Jquery tagsinput不会在粘贴输入时自动创建标记

Question

我正在使用jquery.tagsinput,并希望能够粘贴以逗号或空格分隔的电子邮件地址列表.使用类似这样的东西https://github.com/xoxco/jQuery-Tags-Input/issues/22但它不会添加它们直到我按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});
      }
    },
});

Answer 1

好吧终于找到了解决方案:

在这里演示

只需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文本框上调用事件,元素的结构将如下图所示: