我正在用HTML和JavaScript构建一个待办事项列表，现在我不仅要添加提交按钮的输入，而且如果我在页面上的任何地方按下enter键。我主要想用javascript来创建这个函数，而不是"onclick"html.
<!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 = "";
}
您可以将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>您可以使用键up事件
document.addEventListener('keyup', keypress);
function keypress(e){
e.preventDefault()
if (e.key === 'Enter' || e.keyCode === 13) {
submitForm();
}
}
添加e.p preventdefault()来避免表单提交
https://developer.mozilla.org/en-US/docs/Web/API/Document/keyup_event