题解 | #设置标签#

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.tagInput = document.querySelector('.tag-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() {
  var that = this;
  var input = that.input;
  const inputValue = input.value.trim();
  if (inputValue) {
    const node = document.createElement('span');
    node.innerText = inputValue;
    node.classList = 'tag';
    that.tagInput.insertBefore(node, input);
    input.value = '';
  }
}

function removeTag() {
  var that = this;
  var input = that.input;
  if (input.value) {
    input.value = input.value.substring(0, input.value.length - 1)
  } else {
    const prevSpan = that.input.previousElementSibling;
    prevSpan && prevSpan.parentNode.removeChild(prevSpan);
  }
}