一旦达到限制，如何停止将标签添加到数组中？答案

【问题标题】：How to stop tags being added to an array once limit is reached?一旦达到限制，如何停止将标签添加到数组中？
【发布时间】：2016-10-10 14:18:57
【问题描述】：

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

tagLimit: 2,

虽然这会阻止您在框中输入超过 2 个，但它仍会将它们添加到“sampleTags”数组中。一旦达到限制，有人知道如何防止它添加到数组中吗？

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

【问题讨论】：

标签： jquery html tag-it

【解决方案1】：

您可以使用 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();
  });

删除带有“sampleTags.push(inp);”的行

在 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/

更新：

回答评论。达到 tagLimit 时使用“onTagLimitExceeded”提供反馈。这里的工作示例：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】：

您可以在提交函数中添加一个 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();
  });

我已经更新了你的 Fiddle (http://jsfiddle.net/uVxXg/139/)

我希望这对你有用:)

【讨论】：