时间戳

首页 > 解决方案 > 如何通过单击和输入键盘按钮触发添加按钮？

javascript - 如何通过单击和输入键盘按钮触发添加按钮？

问题描述

我正在制作这个 ToDo 应用程序。我可以通过单击添加按钮来添加任务，但我无法弄清楚如何制作它，以便可以使用输入键盘按钮添加任务。

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

  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);

标签： javascript

解决方案

keydown您可以通过检查值来调用事件函数KeyboardEvent.code：

演示：

document.getElementById("myInput").addEventListener("keydown", function(event) {
  if(event.code == "Enter"){
    newElement()
  }
}, true);

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

  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "close";
  span.appendChild(txt);
  li.appendChild(span);
}
<input id="myInput"/>
<ul id="myUL"></ul>

推荐阅读