如何使用 enter 将我的 <li> 元素附加到我的列表中？答案

【问题标题】：How to use enter to append my <li> element to my list?如何使用 enter 将我的 <li> 元素附加到我的列表中？
【发布时间】：2021-03-08 22:19:52
【问题描述】：

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

下面是我用来创建一个新的 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>

【问题讨论】：

最好的方法可能是处理表单submit 事件，并在那里调用newElement()。然后您也可以从按钮中删除onclick。你可能也想use event.preventDefault()，但你还没有提供你的整个表单/HTML（或者是你吗？），所以目前还不清楚你的表单是如何设置的。

标签： javascript button enter onkeypress

【解决方案1】：

使用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.")
  }
});

&lt;input type="text" placeholder="Type and Enter" /&gt;

【讨论】：

它应该可以工作，为第二个添加了一个 sn-p。也许在你的真实代码中检查其他地方
谢谢！我玩弄了您的代码并将 document.querySelector 更改为 document.getElementById 并且它起作用了！谢谢！！！！