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

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

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}); 
     } 
    }, 
});

来源

2015-06-02 user1678031

所以你想要的？只要你粘贴你想创建标签？ –

@GuruprasadRao是的，只要我粘贴它，现在它不会创建标签，直到我按Enter或点击输入 – user1678031

好吧。现在看到'tagsinput'的基本功能就是在你关注或点击输入时创建标签！即使你打空间也不会创建'tags'！你有没有注意到？ –

好吧终于想出了解决方案：

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文本框和所述元件的结构也将被显示在下面的图像：

来源

2015-06-03 05:00:31

太好了，非常感谢！:) – user1678031

任何时候..快乐编码.. :) –

是它完全可能让整个盒子的宽度和高度由我的个人CSS定义？像flex宽度的百分比？ – nclsvh

非常感谢这个鼓舞人心的解决方案！

我在上面的代码中遇到了一些问题。我正在使用angularjs并且不想通过ID访问元素。

下面是我在一个directive声明什么工作，万一有人可能会insterested：

所有的

link: function(scope, el, attr){ 

    /* initializing element */ 
    var $el = angular.element(el); 
    $el.tagsinput({...}); //<-- initialize as desired 

    /* getting the "_tag" input */ 
    var $elTag = $el.tagsinput('input'); 

    /* attaching event to "_tag" input */ 
    $elTag.on('paste', function (e) { 
     var element = this; 
     setTimeout(function() { 
      var text = $(element).val(); 
      var target = $el; 
      $elTag.val(''); // <--- removes the pasted value containing the "," 
      var tags = (text).split(/[ ,]+/); 
      for (var i = 0, z = tags.length; i < z; i++) { 
       var tag = $.trim(tags[i]); 
       if(target.tagsinput('items').indexOf(tag) < 0){ // <-- I got "'tagExist' not a function" error 
        target.tagsinput('add',tag); 
       } 
      } 
     }, 0); 
    }); 
}

来源

2017-11-17 16:03:23 Wade

首先，你应该导入此文件https://github.com/xoxco/jQuery-Tags-Input/tree/master/src

这是我们的脚本代码。

$(function() { 
     $("#EditorInputs").val($("#Editors").val()); 
     $('#EditorInputs').tagsInput({ 
      'height': '50px', 
      'width': 'auto', 
      'defaultText': 'Editor', 
      'removeWithBackspace': true, 
      'delimiter': [','], 
      'onChange': function() { 
       $("#Editors").val($('#EditorInputs').val()); 
      } 
     }); 
    });

如果您正在使用MVC

<div class="form-group"> 
      @Html.LabelFor(m => m.Editors, new { @class = "col-md-2 control-label" }) 
      <div class="col-md-10"> 
       @Html.HiddenFor(m => m.Editors) 
       <input id="EditorInputs" value="" /> 
       @Html.ValidationMessageFor(m => m.Editors, "", new { @class = "text-danger" }) 
      </div> 
     </div>

来源

2017-12-08 12:05:11 aemre

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

回答

相关问题