题解 | #设置标签#

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.getElementsByClassName('js-input')[0];
    var tags = Array.from(document.getElementsByClassName('tag'));
    var tags_len = tags.length;
    that.tags_name = [];
    for (var i=0;i<tags_len;i++){
        that.tags_name.push(tags[i].innerText);
    }
    that.bindEvent();
}

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

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

function addTag() {
    var that = this;
    var val = that.input.value.trim();
    console.log(that.tags_name);
    if (val && that.tags_name.indexOf(val) == -1) {
        that.input.insertAdjacentHTML('beforeBegin', '<span class="tag">'+val+'</span>');
        that.tags_name.push(val);
    }
    that.input.value = '';
}

function removeTag() {
    var that = this;
    var val = that.input.value.trim();
    if (!val) {
        var prev = that.input.previousSibling;
        if (prev) {
            that.input.parentNode.removeChild(prev);
        }
    }
}