教你如何利用js实现一个标签添加功能

做过自媒体的同学应该，在许多网站中都能看到这个功能，为你的视频或文章添加标签，可以让系统更清楚的认识到你的内容，也可以快速的推荐给感兴趣的用户，今天我们就来做一个添加标签的功能，废话不多说，先看最终效果：

在这里主要的功能是，通过输入框输入关键字，按下回车后，标签会出现在下面，当鼠标经过标签时，标签高亮，当鼠标点击标签时，标签被删除。
我还做了一个功能是当标签的数量大于了10个之后，会删除最早添加的那个标签。

因为在这里，布局和样式非常简单，而且每个网站都不相同，我在这里就直接贴出我的布局，大家可以自己按照合理的方式进行布局，主要是js部分的逻辑。

HTML:

    <div>
        <h1>添加标签</h1>
        <input type="text" placeholder="请添加标签,按回车结束，点击标签可删除标签....">
        <ul></ul>
    </div>

CSS:

        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 500px;
            padding-top: 20px;
            height: 400px;
            margin: 100px auto;
            text-align: center;
            background-color: blanchedalmond;
            border-radius: 20px;
        }
        input{
            box-sizing: border-box;
            width: 400px;
            height: 40px;
            padding: 3px 0;
            padding-left: 20px;
            border: 1px solid #d9b611;
            border-radius: 50px;
            /* 让输入框在点击时，不会出现装饰框 */
            outline: 0;
            margin-top: 20px;
        }
        ul{
            width: 400px;
            list-style: none;
            margin: 20px auto;
        }
        li{
            float: left;
            margin: 5px;
            border: 1px solid #c2ccd0;
            color: #9a9d9e;
            padding:5px 10px;
            font-size: 12px;
            border-radius: 50px;
            transition: .3s;
        }
        li:hover{
            color: #ffffff;
            background-color: #21a675;
        }

JavaScript:

        var inputNode = document.querySelector('input');
        var ulNode = document.querySelector('ul');
        // 标签计数器
        var num = 0;
        // 上一次添加的标签
        var oldLi = null;
        var liNode;
        // 键盘输入事件
        inputNode.onkeyup = function(event){
            // 判断回车键按下
            if(event.key == 'Enter'){
                // this在这里代表的是input输入框，在这里拿到输入框的value
                // 再使用trim()方法来去除字符串两端的空格返回一个字符串
                // 最后通过隐式转换，转换为boolean
                // 这一步的目的是判断输入的是否为空串或空白串
                if(this.value.trim()){
                    // oldLi存储上一个元素节点，用于往上一个元素节点前添加
                    // 当程序第一次运行的时，上一个节点为空，所以添加到第一个
                    oldLi = liNode;
                    // 创建一个li节点
                    liNode = document.createElement('li');
                    // 当li节点被点击时，删除自己
                    liNode.onclick = function(){
                        // this在这里代表的时当前被点击的li节点
                        ulNode.removeChild(this);
                    }
                    num++;
                    // 将处理完的数据写入li
                    liNode.innerHTML = this.value.trim();
                    // 通过ul在上一个添加的子节点中添加
                    ulNode.insertBefore(liNode,oldLi);
                    // 当li的个数大于时，删除最早添加的li节点（也就是最后一个li节点）
                    if(num > 10){
                        var lastLi = ulNode.lastElementChild;
                        ulNode.removeChild(lastLi);
                    }
                }else{
                    alert('输入不能为空');
                }
                // 在按下回车后，将input中的value清空，准备第二次输入
                this.value = '';
            }
        }   

OK,到这里程序就完成了，各位小伙伴可以根据自己的需求对程序进行修改，例如，标签超过一定数量将不能添加标签；限制用户输入的标签长度、字符；为用户提供推荐标签（例如CSDN的文章标签），点击后添加到列表…

有兴趣的小伙伴可以自己试一下，我把代码放在下面，大家可以自行下载查看

源码下载

如果对您有帮助的话，记得点个赞哦~

内容如有错误，请各位大佬斧正