如何使用 jQuery 禁用 Enter 键提交表单?
jqueryweb developmentfront end technology
在本文中，我们将学习如何使用 jQuery 禁用 Enter 键提交表单的行为，以及它的元素选择器功能和"keypress"事件监听器。
在需要对某些输入字段进行验证的情况下，禁用表单提交功能非常有用。例如，对于必填字段为姓名和电子邮件地址的表单，理想情况下，在这些必填字段输入值之前，不应该启用提交按钮。在这种情况下，我们可以动态禁用表单提交功能以达到预期效果。
在这里，我们将仅在用户按下 Enter 键提交表单时禁用表单提交流程。我们将在表单上放置一个"keypress"事件监听器，并检测按下的键是否为 Enter 键。如果是，我们将在表单提交流程中返回 false。
让我们通过一些示例来理解这一点 -
示例 1
在此示例中，我们将创建一个包含不同输入框的表单，包括电子邮件、名字和姓氏，并在表单上放置一个"keypress"事件监听器，以检测回车键并禁用表单提交。
文件名:index.html
<html lang="en">
<head>
<title>How to disable form submit on enter button using jQuery?</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</head>
<body>
<h3>How to disable form submit on enter button using jQuery?</h3>
<form id="myForm" style="display: flex; flex-direction: column; gap: 10px; max-width: 300px;">
<input type="email" name="email" placeholder="Enter your email">
<input type="text" name="firstName" placeholder="Enter your first name">
<input type="text" name="lastName" placeholder="Enter your last name">
<input type="submit" name="submit" value="Submit">
</form>
<script>
$(document).ready(function(){
$('#myForm').keydown(function(event){
if(event.keyCode == 13) {
alert('You pressed enter! Form submission will be disabled.')
event.preventDefault();
return false;
}
});
});
</script>
</body>
</html>
示例 2
在此示例中，我们将创建一个包含电子邮件和密码字段的登录表单，并且我们将禁用按下 Enter 键后表单提交的功能，直到两个字段都填写完毕。
文件名:index.html
<html lang="en">
<head>
<title>How to disable form submit on enter button using jQuery?</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</head>
<body>
<h3>How to disable form submit on enter button using jQuery?</h3>
<form id="loginForm" style="display: flex; flex-direction: column; gap: 10px; max-width: 300px;">
<input type="email" name="email" placeholder="Enter your email">
<input type="password" name="password" placeholder="Enter your password">
<input type="submit" name="submit" value="Login" disabled>
</form>
<script>
$(document).ready(function(){
$('#loginForm input').on('keyup', function(){
if($('#loginForm input[name="email"]').val() !== '' && $('#loginForm input[name="password"]').val() !== '') {
$('#loginForm input[name="submit"]').prop('disabled', false);
} else {
$('#loginForm input[name="submit"]').prop('disabled', true);
}
});
$('#loginForm').keydown(function(event){
if(event.keyCode == 13 && ($('#loginForm input[name="email"]').val() === '' || $('#loginForm input[name="password"]').val() === '')) {
alert('Please fill out both email and password fields to login.')
event.preventDefault();
return false;
}
});
});
</script>
</body>
</html>
示例 3
在此示例中，我们使用 3 种不同的方法禁用 Enter 按钮上的表单提交行为。在第一种方法中，我们捕获 keypress 事件并检查是否按下了按键。在第二种方法中，我们在输入框获得焦点时禁用表单提交。在第三种方法中，我们使用 onkeydown 属性并捕获 keydown 事件。
Filename: index.html
<html lang="en">
<head>
<title>How to disable form submit on enter button using jQuery?</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</head>
<body>
<h3>How to disable form submit on enter button using jQuery?</h3>
<form id="loginForm" style="display: flex; flex-direction: column; gap: 10px; max-width: 300px;">
<input type="email" name="email" placeholder="Enter your email">
<input type="password" name="password" placeholder="Enter your password">
<input type="submit" name="submit" value="Login">
</form>
<script>
$(document).ready(function() {
// 方法 1:捕获按键事件并检查 Enter 键
$('#loginForm').keypress(function(event) {
if (event.which === 13 && ($('#loginForm input[name="email"]').val() === '' || $('#loginForm input[name="password"]').val() === '')) {
alert('Please fill out both email and password fields to login.');
event.preventDefault();
return false;
}
});
// 方法 2:禁用输入焦点上的提交按钮
$('#loginForm input[name="email"], #loginForm input[name="password"]').focus(function() {
$('#loginForm input[name="submit"]').prop('disabled', true);
});
$('#loginForm input[name="email"], #loginForm input[name="password"]').blur(function() {
if ($('#loginForm input[name="email"]').val() !== '' && $('#loginForm input[name="password"]').val() !== '') {
$('#loginForm input[name="submit"]').prop('disabled', false);
}
});
// 方法3:使用 onkeydown 属性
$('#loginForm input[name="email"], #loginForm input[name="password"]').on('keydown', function(event) {
if (event.keyCode === 13) {
event.preventDefault();
return false;
}
});
});
</script>
</body>
</html>
结论
在本文中，我们学习了如何使用 jQuery 及其元素选择器功能和"keypress"事件监听器来禁用 Enter 键按下时的表单提交流程。我们将事件监听器放置在表单上，并检查用户是否按下了 Enter 键。如果按下，则在表单提交流程中返回 false。
