如何修改Tag.js实现按回车键添加标签？

嘿，我看了你的问题和代码片段，其实你已经离实现功能很近啦！现在的脚本只支持逗号和退格键操作，要加上回车键添加标签的功能，只需要在按键监听的逻辑里简单修改就行。

先理清楚你的现有逻辑 #

你的代码里已经通过keydown事件监听了逗号键（键码188）来添加标签，还有退格键删除标签。之前尝试用键码13（回车键）没成功，大概率是没把回车键的判断和现有的添加逻辑整合好。

修改步骤 #

直接找到mainInput的keydown事件监听代码块，把回车键的判断加入到逗号键的条件里就行，具体有两种写法：

写法1：用keyCode（兼容旧浏览器）

把原来判断逗号键的条件，改成同时判断逗号和回车键：

mainInput.addEventListener('keydown', function (e) { 
  // 同时监听逗号键(188)和回车键(13)
  if (e.keyCode === 188 || e.keyCode === 13) { 
    e.preventDefault(); // 必须加这个，阻止回车键默认的表单提交行为
    let tag = this.value.trim(); 
    if (tag.length > 0 && tags.indexOf(tag) === -1) { 
      tags.push(tag); 
      renderTags(); 
      this.value = ''; 
    } 
  } else if (e.keyCode === 8 && this.value.length === 0 && tags.length > 0) { 
    tags.pop(); 
    renderTags(); 
  } 
});

写法2：用e.key（更直观，现代浏览器推荐）

现在很多浏览器更推荐使用e.key来判断按键，可读性更强，你也可以改成这样：

mainInput.addEventListener('keydown', function (e) { 
  // 同时监听逗号和回车键
  if (e.key === ',' || e.key === 'Enter') { 
    e.preventDefault(); 
    let tag = this.value.trim(); 
    if (tag.length > 0 && tags.indexOf(tag) === -1) { 
      tags.push(tag); 
      renderTags(); 
      this.value = ''; 
    } 
  } else if (e.key === 'Backspace' && this.value.length === 0 && tags.length > 0) { 
    tags.pop(); 
    renderTags(); 
  } 
});

关键提醒 #

一定要记得调用e.preventDefault()，不然回车键会触发表单的默认提交动作，导致页面刷新，标签还没加上就跳转了，这也是很多人踩坑的点！

这样修改后，用户无论是按逗号还是回车键，都能正常添加标签啦～

内容的提问来源于stack exchange，提问作者Jasmine Joseph