Romantic

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

最终效果

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

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

2022/05/11/7cad6cd31c564c5eb709da050b6d67fb.gif

代码实现

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个时不可添加

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

//存储标签
var tagLists = [];
Enter键添加标签

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

//监听键盘按下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(",")

------


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

0 标签: #Javascript#Html

发表评论

wave
请填写评论信息

评论

wave

按 ESC 返回