JavaScript 中的输入键事件
本教程演示了每次按下 Enter 键时使用 JavaScript enter key event 停止表单提交的不同方法。
在以下示例中，我们获取 id 值为 form 的元素并将其保存到 element 变量中。
之后，addEventListener() 方法用于将事件处理程序附加到元素。每当按下 Enter 键时，都会使用 event.preventDefault() 阻止表单提交。
event.key 告诉了键的名称，event.which 显示了键的代码。
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>Enter Key Event</title>
</head>
<body>
<form action="#" method = "POST" id="form">
<label>First name:</label>
<input type="text" id="first-name" name="first-name">
<br />
<label>Last name:</label>
<input type="text" id="last-name" name="last-name">
<br />
<input id="submitBtn" type="submit" value="Submit" />
</form>
</body>
</html>
JavaScript 代码：
var element = document.getElementById("form");
element.addEventListener("keypress", function(event) {
if (event.key === "Enter") {
alert(event.key + " " + event.which);
event.preventDefault();
}
});
在前面的示例中，我们正在检测 <form> 元素中的 Enter。但是如果按下 Enter 键，下面给出的代码会阻止表单提交。
document.addEventListener('keypress', function (e) {
if (e.keyCode === 13 || e.which === 13) {
e.preventDefault();
return false;
}
});
/*we can write the same logic in jQuery as follows. You
can copy the jQuery code and uncomment to practice. Make
sure to include the jQuery library.*/
/*
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
*/
click 事件不会让 Enter 键提交表单。
每次点击 id 值为 submitBtn 的元素时，都会提交表单。请参阅以下示例。
document.getElementById("submitBtn").addEventListener("click", function () {
form.submit();
});
不建议使用以下方法，因为 HTML 和 JavaScript 必须位于单独的文件中才能组织代码。
尽管如此，你也可以在 <input> 元素中使用 type=submit 中的 onkeypress 属性，如果按下Enter 键，则会阻止表单提交。
我们也可以为每个输入字段使用这个属性。检查以下示例。
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>Enter Key Event</title>
</head>
<body>
<form action="#" method = "POST" id="form">
<label>First name:</label>
<input type="text" id="first-name" name="first-name" onkeypress="return
(event.keyCode!=13);">
<br />
<label>Last name:</label>
<input type="text" id="last-name" name="last-name" onkeypress="return
(event.keyCode!=13);">
<br />
<input id="submitBtn" type="submit" value="Submit" onkeypress="return
(event.keyCode!=13);" />
</form>
</body>
</html>
我们还可以在 JavaScript 文件中创建一个单独的函数，并在单击特定按钮时调用它。只有单击该按钮，表单才会提交；否则，不是。
请参阅以下代码。
HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>Enter Key Event</title>
</head>
<body>
<form action="#" method = "POST" id="form">
<label>First name:</label>
<input type="text" id="first-name" name="first-name">
<br />
<label>Last name:</label>
<input type="text" id="last-name" name="last-name">
<br />
<input id="submitBtn" type="submit" value="Submit" onclick="myfunction()" />
</form>
</body>
</html>
JavaScript 代码：
document.addEventListener('keypress', function (e) {
if (e.keyCode === 13 || e.which === 13) {
e.preventDefault();
return false;
}
});
function myfunction() {
document.getElementById("form").submit();
}
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间：2024/03/24 浏览次数：102 分类：JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间：2024/03/24 浏览次数：180 分类：JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。
