如何将触发键添加到我的 javascript 项目答案

【问题标题】：How to add trigger key to my javascript project如何将触发键添加到我的 javascript 项目
【发布时间】：2021-09-16 20:31:17
【问题描述】：

向输入区域添加内容时，如何在按钮上添加触发键？

我的代码：

let animals = [];

function add() {
  let addAnimal = document.getElementById("enter").value;
  animals.push(addAnimal);
  let openList = "<ul>";
  let text = "";
  let closeList = "</ul>"
  
  for (i = 0; i < animals.length; i++) {
    text += "<li>" + animals[i] + "</li>";
  }
  
  document.getElementById("demo").innerHTML = openList + text + closeList;
}

<input id="enter" />
<button onclick="add()">Submit</button>

【问题讨论】：

将您的 HTML 包装在
中，处理表单的 submit 事件并在其上调用 .preventDefault()：jsfiddle.net/2bo38nvL
如果您有一个以demo 为 id 的元素，这应该可以正常工作。类似<div id="demo" />
@adiga 我相信 OP 希望能够按 Enter 提交值。

标签： javascript html triggers keyboard enter

【解决方案1】：

要在键盘事件上添加事件侦听器，您可以使用keydown 事件，然后根据keyCodes 过滤事件

这里是一个按下回车键的例子：

let animals = [];

function add() {
  let addAnimal = document.getElementById("enter").value;
  animals.push(addAnimal);
  let openList = "<ul>";
  let text = "";
  let closeList = "</ul>"
  
  for (i = 0; i < animals.length; i++) {
    text += "<li>" + animals[i] + "</li>";
  }
  
  document.getElementById("demo").innerHTML = openList + text + closeList;
}

function keyCallback(event) {
  if(event.key === "Enter") {
    add();
  }
}

addEventListener("keydown", keyCallback);

<input id="enter" />
<button onclick="add()">Submit</button>

<div id="demo"></div>

【讨论】：