时间戳

首页 > 解决方案 > 如何使用回车附加我的

  • 元素到我的列表？

    • javascript - 如何使用回车附加我的
  • 元素到我的列表？

    • 问题描述

    所以现在我有一个待办事项列表，要添加列表项，您必须单击一个按钮。我还希望允许用户点击“输入”以执行与按钮相同的操作。

    下面是我用来创建一个新的 li 元素并将其附加到我的列表中的 js 代码。

    function newElement(){
    var li = document.createElement('li');
    var inputValue = document.getElementById("myInput").value;
    li.appendChild(document.createTextNode(inputValue));
        if (inputValue === '') {
        alert("You must write something!");
      } else {
        document.getElementById("list").appendChild(li);
      }

    document.getElementById("myInput").value = "";

    这是我运行上面 newElement() 函数的按钮的 HTML 代码。

    <input type ="text" id="myInput"  placeholder="Type Task Here" >
        <button class="submitButton" type="button" onclick="newElement()">Add To List</button>

    标签： javascriptbuttonenteronkeypress

    解决方案

    使用keydown事件并检查keyCode

    document.addEventListener("keydown", function (event) {
  if (event.keyCode === 13) {
    newElement();
  }
});

    或者，如果您只想在 上进行此行为input，请尝试在input唯一的

    document.querySelector("input").addEventListener("keydown", function(event) {
  if (event.keyCode === 13) {
    console.log("Enter key detected.")
  }
});
    <input type="text" placeholder="Type and Enter" />

    推荐阅读