题解 | #设置标签#

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) {
      console.log(event);
      // 请修改这一行代码，判断用户是否按了回车键
      var isEnter = false;
      if(event.keyCode == 13){
        isEnter = true;
      }
      // 请修改这一行代码，判断用户是否按了删除键
      var isDelete = false;
      // 【需求】2、当用户敲删除键时，如果输入框当前没有内容，则删除前一个标签
      // 如果按下了删除按钮，并且input框中的内容为空才执行删除tag操作。如果input内容为空则执行默认操作
      if(event.keyCode == 8 && !that.input.value){
        isDelete = true;
      }

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

// 【需求】1、当用户输入内容并敲回车键时，将输入框的内容在输入框前显示成标签，并清空输入框内容
function addTag() {
  var _this = this;
  // 【需求】4、标签不能为空字符串
  if(_this.input.value == "") return;
  // 创建需要添加的新标签
  var newSpan = document.createElement("span");
  newSpan.className = "tag";
  // 【需求】3、标签需要去掉字符串两端的多余的空格
  newSpan.innerHTML = _this.input.value.trim();
  // 获取到已添加的tag标签，用于判断是否重复添加
  var tagsList = _this.input.parentElement.innerText.split("\n");
  // 【需求】5、标签不能重复，如果输入已存在的内容相同的标签，则不添加，并清空输入框
  if(!tagsList.includes(_this.input.value)){
    // 向input框之前插入一个tag
    _this.input.parentElement.insertBefore(newSpan, _this.input);
  }
  // 添加完成后清空数据
  _this.input.value = "";
}

function removeTag() {
  var _this = this;
  // 删除最后一个标签
  _this.input.parentElement.removeChild(_this.input.previousElementSibling);
}