题解 | #设置标签#

var tagInput = {isInited: false, // 是否已经初始化init: init,bindEvent: bindEvent,addTag: addTag,removeTag: removeTag};tagInput.init();

    function init() {
        var that = this;
        if (that.isInited) return;
        that.isInited = true;
        // 请修改这一行代码，保存class为js-input的输入框的dom元素引用
        that.input = document.querySelector('.js-input');
        that.bindEvent();
    }

    function bindEvent() {
        var that = this;
        var input = that.input;
        if (!input) return;
        input.addEventListener('keydown', function (event) {
            // 请修改这一行代码，判断用户是否按了回车键
            var isEnter = event.keyCode == 13;

            // 请修改这一行代码，判断用户是否按了删除键
            var isDelete = event.keyCode === 8;

            (isEnter || isDelete) && event.preventDefault();
            isEnter && that.addTag();
            isDelete && that.removeTag();
        });
        input.parentNode.addEventListener('click', function () {
            input.focus();
        });
    }

    function addTag() {
        let that = this;
        let tagInput = document.querySelector('.tag-input');

        // trim() 函数用于去除字符串两端多余的空格
        if (that.input.value.trim() == '') {
            that.input.value = '';
            return;
        }

        for (let i = 0; i < tagInput.children.length - 1; i++) {
            if (tagInput.children[i].innerHTML === that.input.value) {
                that.input.value = '';
                return;
            }
        }

        let span = document.createElement('span');
        // 先去除字符串两侧多余的空格，再赋值
        span.innerHTML = that.input.value.trim();
        span.classList.add('tag');
        tagInput.insertBefore(span, tagInput.children[tagInput.children.length - 1]);
        that.input.value = '';
    }

    function removeTag() {
        let that = this;
        let tagInput = document.querySelector('.tag-input');
        if (!that.input.value) {
            if (tagInput.children.length > 1) {
                tagInput.removeChild(tagInput.children[tagInput.children.length - 2]);
            }
        }
    }

            isInited: false,         // 是否已经初始化

            init: init,

            bindEvent: bindEvent,

            addTag: addTag,

            removeTag: removeTag

        };

        tagInput.init();

        function init() {

            var that = this;

            if (that.isInited) return;

            that.isInited = true;

            // 请修改这一行代码，保存class为js-input的输入框的dom元素引用

            that.input = document.querySelector('.js-input');

            that.bindEvent();

        }

        function bindEvent() {

            var that = this;

            var input = that.input;

            if (!input) return;

            input.addEventListener('keydown', function (event) {

                // 请修改这一行代码，判断用户是否按了回车键

                var isEnter = event.keyCode == 13;

                // 请修改这一行代码，判断用户是否按了删除键

                var isDelete = event.keyCode === 8;

                (isEnter || isDelete) && event.preventDefault();

                isEnter && that.addTag();

                isDelete && that.removeTag();

            });

            input.parentNode.addEventListener('click', function () {

                input.focus();

            });

        }

        function addTag() {

            let that = this;

            let tagInput = document.querySelector('.tag-input');

            // trim() 函数用于去除字符串两端多余的空格

            if (that.input.value.trim() == '') {

                that.input.value = '';

                return;

            }

            for (let i = 0; i < tagInput.children.length - 1; i++) {

                if (tagInput.children[i].innerHTML === that.input.value) {

                    that.input.value = '';

                    return;

                }

            }

            let span = document.createElement('span');

            // 先去除字符串两侧多余的空格，再赋值

            span.innerHTML = that.input.value.trim();

            span.classList.add('tag');

            tagInput.insertBefore(span, tagInput.children[tagInput.children.length - 1]);

            that.input.value = '';

        }

        function removeTag() {

            let that = this;

            let tagInput = document.querySelector('.tag-input');

            if (!that.input.value) {

                if (tagInput.children.length > 1) {

                    tagInput.removeChild(tagInput.children[tagInput.children.length - 2]);

                }

            }

        }