时间戳

首页 > 解决方案 > 按下 Enter 时提交表单（待办事项列表）

javascript - 按下 Enter 时提交表单（待办事项列表）

问题描述

我正在使用 HTML 和 JavaScript 构建一个待办事项列表，现在我不仅想通过提交按钮添加输入，而且如果我在页面上的任何位置按下回车，我也想添加输入。我主要想使用 javascript 来创建该功能，html 中没有“onclick”功能。

     <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="style.css" />
        <title>To do app</title>
      </head>
      <body>
        <h1>To-Do List</h1>
        <form>
          <input type="text" placeholder="Add an item!" id="inputField" />
        </form>
        <button id="submit">Submit</button>
        <button id="clear">Clear List</button>
        <div id="output"></div>
        <script src="script.js"></script>
      </body>
    </html>

----------------------------------
    document.getElementById("submit").addEventListener("click", function () {
      submitForm();
    });
    
    document.getElementById("clear").addEventListener("click", function () {
      document.getElementById("inputField").value = "";
      document.getElementById("myOl").innerHTML = "";
    });
    
    function submitForm() {
      let input = document.getElementById("inputField").value;
    
      let ol = document.createElement("ol");
      ol.setAttribute("id", "myOl");
      document.body.appendChild(ol);

      let y = document.createElement("LI");
      let t = document.createTextNode(`${input}`);
      y.appendChild(t);
      document.getElementById("myOl").appendChild(y);
    
      document.getElementById("inputField").value = "";
    }

标签： javascripthtml

解决方案

您可以使用keypress事件侦听器document.addEventListener并检查event.key,event.keyCode和event.which组合来检查输入键。

不要忘记使用event.preventDefault()以防止重新加载页面。

document.getElementById("submit").addEventListener("click", function () {
  submitForm();
});

document.getElementById("clear").addEventListener("click", function () {
  document.getElementById("inputField").value = "";
  document.getElementById("myOl").innerHTML = "";
});

document.addEventListener('keypress', function (e) {
  const code = (e.keyCode ? e.keyCode : e.which);
  if (e.key === 'Enter' || code == 13) {
    submitForm();
    e.preventDefault();
  }
});

function submitForm() {
  let input = document.getElementById("inputField").value;

  let ol = document.createElement("ol");
  ol.setAttribute("id", "myOl");
  document.body.appendChild(ol);

  let y = document.createElement("LI");
  let t = document.createTextNode(`${input}`);
  y.appendChild(t);
  document.getElementById("myOl").appendChild(y);

  document.getElementById("inputField").value = "";
}
<h1>To-Do List</h1>
<form>
  <input type="text" placeholder="Add an item!" id="inputField" />
</form>
<button id="submit">Submit</button>
<button id="clear">Clear List</button>
<div id="output"></div>

推荐阅读