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

【问题标题】：Jquery tagsinput not creating tags automatically on pasting inputJquery tagsinput不会在粘贴输入时自动创建标签
【发布时间】：2015-06-02 03:45:46
【问题描述】：

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

【问题讨论】：

那么你想要什么？？粘贴后就想创建标签？？
@GuruprasadRao 是的，只要我粘贴它，现在它不会创建标签，直到我按 Enter 或点击退出输入
好的。现在看到tagsinput 的基本功能是在您专注或点击进入时创建标签！即使你点击空间它也不会创建tags!!你注意到了吗？？
是的，在这种情况下，我添加了 split(/[ ,]+/) 来解决这个问题
方法onAddTag 将在您从textbox 中的blur 或当您点击enter 时调用！所以没用！！你需要类似tagsinput的按键事件！！

标签： jquery tags paste eventtrigger jquery-tags-input

【解决方案1】：

好吧终于想通了：

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 文本框，因此您需要在#tagsinput_tag 文本框上调用paste 事件，元素的结构将如下图所示：

【讨论】：

任何时候..快乐编码..:)
有没有可能让我个人的css来定义整个盒子的宽高？像 flex 宽度的 %？
@NicolasV 是的，这是可能的。如果您知道DOM 中元素的正确结构，那就很容易了。
@GuruprasadRao 啊这样。我希望在设置中有一个选项！谢谢

【解决方案2】：

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

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

以下是 directive 声明中对我有用的内容，以防有人感兴趣：

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

【讨论】：

【解决方案3】：

首先你应该导入这个文件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>

【讨论】：