我做了一个简单的代码，改变标题，当你在输入文本，但我希望事件触发时，我按下回车键，因为我必须按下按钮，让它工作，有一段代码我可以实现有他的工作?欢呼。
function block() {
var myValue = document.getElementById('textBox').value;
if (myValue.length == 0) {
alert('Please fill with valid text');
return;
}
var myTitle = document.getElementById('Heading');
myTitle.innerHTML = myValue;
};<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fundamentals.css">
<script src="fundamentals.js"></script>
<title>Javscript</title>
</head>
<body>
<h1 id="Heading">This is a heading</h1>
<input type="text" id="textBox">
<input type="submit" value="Click Me" onclick="block()">
</body>
</html>添加一个eventListener到输入中，当按下键时触发，如果键是enter，则该函数与您所做的相同。
我在W3Schools上找到了这个
var myInput = document.getElementById("textBox");
var myTitle = document.getElementById("Heading");
myInput.addEventListener("keypress", function (event) {
if (event.key === "Enter") {
if (myInput.value.length == 0) {
alert("Please fill with valid text");
return;
}
event.preventDefault();
myTitle.innerHTML = myInput.value;
}
});<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fundamentals.css">
<script src="fundamentals.js"></script>
<title>Javscript</title>
</head>
<body>
<h1 id="Heading">This is a heading</h1>
<input type="text" id="textBox">
</body>
</html>在表单元素中包装您的输入，因此输入触发submit事件:
document.getElementById('heading-changer').addEventListener('submit', function (event) {
event.preventDefault(); // otherwise page reloads
var myValue = document.getElementById('textBox').value;
if (myValue.length == 0) {
alert('Please fill with valid text');
return;
}
var myTitle = document.getElementById('Heading');
myTitle.innerHTML = myValue;
});<h1 id="Heading">This is a heading</h1>
<form id="heading-changer">
<input type="text" id="textBox">
<input type="submit" value="Click Me">
</form>或者你可以这样做:
function handleKeyPress(e){
if(e.keyCode === 13){
e.preventDefault();
var myValue = e.target.value;
if (myValue.length == 0) {
alert('Please fill with valid text');
return;
}
var myTitle = document.getElementById('Heading');
myTitle.innerHTML = myValue;
}
}<h1 id="Heading"></h1>
<input onkeypress={handleKeyPress(event)} />