题解 | #设置标签#

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 = false;
// 请修改这一行代码，判断用户是否按了删除键
var isDelete = false;
var code = event.keyCode || '';

    if(!{'8':1,'13':1}[code]) return;
    switch(code){
        case 13:
            isEnter = true;
            break;
        case 8:
            isDelete = true;
            break;
    }

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

}

function addTag() {
var that = this;
var tags = document.querySelectorAll('.tag');
var va = that.input.value.trim();
var c = true;
for(var i = 0;i < tags.length;i++){
if(tags[i].innerHTML == va){
c = false;
break;
}
}
if(va == ''){
c = false;
}
if(!c) return;
var tag = document.createElement('span');
tag.className = 'tag';
tag.innerHTML = va;
document.querySelector('.tag-input').insertBefore(tag,that.input);
that.input.value = '';
}

function removeTag() {
var that = this;
console.log(that.input.value);
if(that.input.value.trim() == ''){
var tag = document.querySelectorAll('.tag');
if(!tag.length) return;
tag[tag.length - 1].remove();
}
else{
that.input.value = that.input.value.slice(0,that.input.value.length - 1);
}
}