按Enter時提交表單（待辦事項串列）-有解無憂

我正在使用 HTML 和 JavaScript 構建一個待辦事項串列，現在我不僅想通過提交按鈕添加輸入，而且如果我在頁面上的任何地方按 Enter 鍵，也可以添加輸入。我主要想使用 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 = "";
    }

uj5u.com熱心網友回復：

您可以使用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>

uj5u.com熱心網友回復：

您可以使用按鍵事件。

document.addEventListener('keyup', keypress);
function keypress(e){
    e.preventDefault()
    if (e.key === 'Enter' || e.keyCode === 13) {
        submitForm();
    }
}

添加 e.preventDefault() 以避免表單提交

https://developer.mozilla.org/en-US/docs/Web/API/Document/keyup_event

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/322238.html

標籤：javascript html

上一篇：從tablerow中通過純JS獲取element.innerHTML//<tronClick(myFunction>

下一篇：如何在表單內更改顯示無輸入？