题解 | #设置标签#

本题的重点在于分清楚，什么时候才可以添加标签、移除标签，至于添加和移除标签，都是非常简单事情

相关键码值，回车键=13，删除键=8

1、当用户输入内容并敲回车键时，获取input框的值，清除两边空格，

1.1若为空，不创建标签,清除input框内容

1.2若有值,需要确定该值不与之前的标签值重复,若不重复,方可添加标签,而后清除input框内容

2.当用户敲删除键时，如果输入框当前没有内容，则删除前一个标签

    var tagInput = {
      isInited: false,
      init: init,
      bindEvent: bindEvent,
      addTag: addTag,
      removeTag: removeTag
    };
    tagInput.init();

    // 函数作用:只调用一次bindEvent函数
    function init() {
      var that = this; // this为tagInput
      if (that.isInited) return;
      that.isInited = true;
      // 请修改这一行代码，保存class为js-input的输入框的dom元素引用
      that.input = document.querySelector('.js-input')
      that.bindEvent();
    }

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

        isEnter && event.preventDefault(); // 阻止默认事件，我觉得阻止删除键的默认事件影响体验感，这里删掉了
        isEnter && that.addTag();
        isDelete && that.removeTag();
      });
      input.parentNode.addEventListener('click', function () {
        input.focus();
      });
    }

    function addTag() {
      let inputValue = this.input.value
      let value = inputValue.trim()

      if (value == '') {
        this.input.value = ''
        return
      }

      let spans = document.querySelectorAll('.tag-input span')
      let spanContents = [].map.call(spans, item => item.innerText)
      if (spanContents.includes(value)) {
        this.input.value = ''
        return
      }
      let spanTag = document.createElement('span')
      spanTag.className = 'tag'
      spanTag.innerHTML = value
      this.input.before(spanTag)
      this.input.value = ''
    }

    function removeTag() {
      if (this.input.value != '') return
      this.input.previousElementSibling && this.input.previousElementSibling.remove()
    }