手把手带你复刻CSDN添加文章标签

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

最终效果

如果你在CSDN发表过博客，那么我们可以从实际应用中基本了解到标签需要实现的功能有：

1. 标签生成数量超过5个时不可添加
2. Enter键入添加标签，输入框清空
3. 出现重复时，则不可添加
4. 点击X删除

html代码

使用了bootstrap样式，tagInput用于标签输入，#tagList的div用于添加生成的标签

<div class="row mb-3">
    <div class="col-2">
        <span>标签</span>
    </div>
    <div class="col-10">
        <input type="text" class="form-control" id="tagInput" placeholder="标签">
        <div id="tagList">
			<!--生成的标签-->
        </div>
    </div>
</div>

页面效果图：

javascript代码

标签超过5个时不可添加

我们创建一个数组，通过数组的长度来判断

javascript代码

//存储标签
var tagLists = [];

Enter键添加标签

因为csdn是没有用，分割的，只有Enter键入生成，所以我们只需要获取input标签中输入的值输出即可。

因此首先我们需要监听键盘的Enter键，判断用户是否按下Enter键，然后判断标签的输入框是否获得焦点，防止和其他操作冲突。当用户按下Enter键并且标签框获得焦点时，需要判断此时的标签数量是否超过五个，当输入合法时将标签添加进统计标签的数组，动态添加结点即可。

javascript代码

//监听键盘按下Enter键
$(document).keyup(function(event) {
    if (event.keyCode == 13) {
        //判断标签输入框是否获得焦点，防止冲突
        var isFocus = $("#tagInput").is(":focus");
        if (isFocus) {
            //判断标签数量是否有5个
            if (tagLists.length = 5) {
                return false;
            }
            //获取输入框输入的值，防止为空，但在CSDN是允许输入空格的
            var text = $("#tagInput").val().trim();
            if (text == "")
                return false;
            //判断标签是否已经在数组中存在，防止重复
            if ($.inArray(text, tagLists) != -1)
                return false;
            //将标签添加进数组，拼接html代码添加到div
            tagLists.push(text);
            $("#tagList").append("<span class='btn btn-info tagItem'>" + text +
                                 " <span class='badge bg-danger delete'><i class='fas fa-times'></i></span></span>");
            //输入框清空
            $("#tagInput").val("");
        }

    }
});

删除标签

对Class为delete的元素添加click点击事件，并从保存标签的tagLists数组中删除

$(document).on("click", ".delete", function() {
    var text = $(this).text().trim();
    tagLists.splice($.inArray(text, tagLists), 1);
    $(this).parent().remove();
});

获取标签

join()方法可以把数组中的所有元素转换为一个字符串

//将数组中的元素使用","拼接
tagLists.join(",")

---

到这里就结束了，如果对你有帮助，请持续关注。