时间戳

首页 > 解决方案 > 如何计算 Bootstrap 标签输入字段中存在的标签数量

javascript - 如何计算 Bootstrap 标签输入字段中存在的标签数量

问题描述

我正在构建一个 CMS，我想让我的引导标签输入至少需要 6 个标签，并计算标签的数量并将其显示在计数器上，如下所示：

<input type="text" data-role="tagsinput" placeholder="Add some tags!" id="tags" required>
<label for="tags">You must enter at least 6 tags. You have added <span id="tag-count">0</span> tags.</label>

input#tags将保存标签，span#tag-count并将显示标签的数量。

如何使用 JavaScript 或 jQuery 做到这一点？

标签： javascriptjquerybootstrap-4bootstrap-tags-input

解决方案

如果您询问如何计算输入文本值中的单词数，您可以通过空格分割字符串来将其转换为数组跳过空元素（如果您有多个空格 beetwen 单词则创建空元素）并检查长度：

const numOfWords = document.getElementById("tags").value
                  .split(" ").filter(word => !!word).length;
document.getElementById("tags-count").innerText = numOfWords;

推荐阅读