如何用JavaScript实现待办清单全页面按Enter键提交表单功能

实现步骤 #

• 在你的script.js文件中新增全局键盘事件监听，判断是否按下Enter键触发提交逻辑，同时阻止form默认提交导致的页面刷新
• 可同步优化原有submitForm方法的逻辑，避免每次提交都新建一个有序列表<ol>元素

新增的核心代码 #

把以下代码直接添加到script.js的任意位置即可生效：

// 监听全局键盘按下事件
document.addEventListener('keydown', function(e) {
  if (e.key === 'Enter') {
    // 阻止form默认提交刷新页面的行为
    e.preventDefault();
    submitForm();
  }
})

可选优化：修正原有submitForm重复创建ol的问题 #

原有代码每次提交都会新建一个<ol>元素，会导致多个列表同时显示，修改后的submitForm代码如下：

function submitForm() {
  let input = document.getElementById("inputField").value;
  // 先查询是否已经存在ol，不存在再创建
  let ol = document.getElementById("myOl");
  if (!ol) {
    ol = document.createElement("ol");
    ol.setAttribute("id", "myOl");
    document.body.appendChild(ol);
  }

  let li = document.createElement("li");
  li.appendChild(document.createTextNode(input));
  ol.appendChild(li);

  document.getElementById("inputField").value = "";
}

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