Question

我已经尝试使用以下方法设置限制我可以插入到框中的标签数量：

tagLimit: 2,

虽然这会阻止您在框中输入2个以上，但它仍会将它们添加到'sampleTags'数组中。有人知道如何防止它在达到限制后添加到阵列中吗？

JSFiddle：http://jsfiddle.net/uVxXg/137/

Answer 1

你可以在你的提交函数中添加一个if来检查sampleTags变量的长度

  $('form').submit(function(e) {
    if(sampleTags.length < 2){
      var inp = $('#tagInput').val();
      $('#tagInput').val('');
      $('#tags').tagit('createTag', inp);
      sampleTags.push(inp);
    }
    e.preventDefault();
  });

我已更新你的小提琴（http://jsfiddle.net/uVxXg/139/）

我希望这适合你：）

Answer 2

您可以使用tagit提供的afterTagAdded事件并移动您的代码，将值推送到数组中。这样，只有在真正添加标记时才会执行代码：

您的代码

  // When the user clicks submit
  $('form').submit(function(e) {
    var inp = $('#tagInput').val();
    $('#tagInput').val('');
    $('#tags').tagit('createTag', inp);
    sampleTags.push(inp);
    e.preventDefault();
  });

使用＆＃34; sampleTags.push（inp）删除该行;＆＃34;

将以下代码添加到tagit函数（请参阅afterTagAdded事件）：

// When the user clicks submit
  $('#tags').tagit({
    availableTags: sampleTags,
    tagLimit: 2,
    afterTagRemoved: function(evt, ui) {
        console.log(ui.tagLabel)
      for(var i = 0; i < sampleTags.length; i++) {
        if (sampleTags[i] == ui.tagLabel) {
          sampleTags.splice(i, 1);
        }
      }
    },
    afterTagAdded: function(evt, data){
        sampleTags.push(data.tagLabel);
    }
  });

请参阅此处的工作示例：http://jsfiddle.net/uVxXg/142/

<强>更新

回答评论。使用＆＃34; onTagLimitExceeded＆＃34;在达到tagLimit时给出反馈。这里的工作示例：http://jsfiddle.net/uVxXg/144/

    afterTagAdded: function(evt, data){
        sampleTags.push(data.tagLabel);
    },
    onTagLimitExceeded: function(evt, data){
        alert('Tag limit reached!');
    }

您可以在tag-it github页面上找到所有事件的列表：https://github.com/aehlke/tag-it/blob/master/README.markdown

如何在达到限制时停止将标签添加到数组中？

2 个答案: