题解 | #设置标签#

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];
    that.bindEvent();
}

function bindEvent() {
    var that = this;
    var input = that.input;
    window.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(e) {

  let _self = this
  let tmp = _self.input.value
  if (tmp.length < 1) return
  let parentNode = document.getElementsByClassName('tag-input')[0]
  let ele = document.createElement('span')
  ele.className = 'tag'
  ele.innerText = _self.input.value
  let box = document.getElementsByClassName('js-input')[0]
  parentNode.insertBefore(ele, box)
  _self.input.value = ''
}

function removeTag(e) {
  let _self = this
  if (_self.input.value.length<1){
    let tags = document.getElementsByClassName('tag')
    if(tags.length>0) {
      tags[tags.length-1].remove()
    }
  } else {
    let tmp = _self.input.value
    _self.input.value = ''
    for (let i=0,imax=tmp.length - 1; i<imax; i++) {
      _self.input.value += tmp[i]
    }
  }
}