JQuery tagsinput не создает теги автоматически при вставке ввода

Question

Я использую 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}); 
     } 
    }, 
}); 

Answer 1

Ok, наконец, выяснили решение:

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 текстовое поле и структура элемента будет, как показано на рисунке ниже:

Answer 2

Большое спасибо за это вдохновляющее решение!

У меня были некоторые проблемы с кодом выше. Я использовал 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); 
    }); 
} 

Answer 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>