Bootstrap 4 TagsInput maxNumTags 不起作用答案

【问题标题】：Bootstrap 4 TagsInput maxNumTags is not workingBootstrap 4 TagsInput maxNumTags 不起作用
【发布时间】：2020-07-05 16:44:05
【问题描述】：

我想在我的输入字段中设置最多 5 个标签，但 maxNumTags:5 在 jquery 中不起作用我应该怎么做才能为 tagsInput 设置最大值？

HTML

<input
  type="text"
  class="form-control"
  id="tags"
  name="tags"
  value="{{ old('tags') }}"
  data-role="tagsinput"
/>

这是脚本

<script src="dashboard-assets/js/tagsinput.js"></script>
<script>
  $("#tags").tags({
    maxNumTags: 5
  });
</script>

【问题讨论】：

jqueryscript.net/form/Bootstrap-4-Tag-Input-Plugin-jQuery.html 从这里我使用 tagsInput js 和 css

标签： javascript html bootstrap-4 bootstrap-tags-input

【解决方案1】：

使用maxTags 设置输入标签的最大数量。您还可以使用allowDuplicates: true 允许在同一输入中重复标签。

工作演示：http://jsfiddle.net/usmanmunir/gh7cy2vf/

运行下面的代码片段以查看它的工作原理。

$(document).ready(function() {
  $('.tags').tagsinput({
    maxTags: 5,
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js" integrity="sha512-VvWznBcyBJK71YKEKDMpZ0pCVxjNuKwApp4zLF3ul+CiflQi6aIJR+aZCP/qWsoFBA28avL5T5HA+RE+zrGQYg==" crossorigin="anonymous"></script>

Type Here: <input type="text"
  class="form-control tags"
  id="tags"
  name="tags" placeholder="Add tags here">

【讨论】：

@tariqulanik 检查我上面的 sn-p 和 JS fiddle。它不允许超过 5 个标签。
@tariqulanik 很高兴我能帮助你。
@tariqulanik 是的，检查我的 JS fiddle 和我的 sn-p 没有它就可以了。 bootstrap 也有一个本地标签输入类型，它不允许限制，但您只想限制正常输入。希望这是有道理的
@tariqulanik 不要伪造接受这个答案。它按你的意愿工作:) 谢谢
谢谢，现在可以使用了。我添加了必要的 CSS。感谢您的帮助@AlwaysHelping :)