题解 | #设置标签#

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() {
    const text = this.input.value.trim()
    if(text === ''){
         this.input.value = ''
         return
    }
    const spans = this.input.parentNode.querySelectorAll('.tag')
    const found =  Array.from(spans).find(ele => ele.textContent === text)
    if(found) {
        this.input.value = ''
        return 
    }
    const span = document.createElement('span')
    span.classList.add('tag')
    span.innerHTML = text
    this.input.parentNode.insertBefore(span, this.input)
    this.input.value = ''
}

function removeTag() {
    const text = this.input.value
    if(text.length === 0 ){
        const spans = this.input.parentNode.querySelectorAll('.tag')
        if(spans.length > 0){
            this.input.parentNode.removeChild(spans[spans.length - 1])
        }
    }
}