JavaScript 中的输入键事件
Mehvish Ashiq
2023年10月12日
本教程演示了每次按下 Enter 键时使用 JavaScript enter key event 停止表单提交的不同方法。
注意
除了最后两个之外，所有示例的 HTML 保持不变。
JavaScript 输入关键事件以防止表单提交
在以下示例中，我们获取 id 值为 form 的元素并将其保存到 element 变量中。
之后，addEventListener() 方法用于将事件处理程序附加到元素。每当按下 Enter 键时，都会使用 event.preventDefault() 阻止表单提交。
你可以在 this页面阅读更多关于这个函数的信息。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();
}
作者： Mehvish Ashiq
