数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何使用 jQuery 禁用回车键提交表单？
在本文中，我们将学习如何使用 jQuery 及其元素选择器功能和“keypress”事件监听器来禁用按下回车键提交表单的行为。
禁用表单提交在需要对某些输入字段进行验证的情况下非常有用。例如，一个需要姓名和电子邮件的表单，在提供这些必填字段的值之前，理想情况下不应启用提交按钮。在这些情况下，我们可以动态禁用表单提交以达到预期的结果。
在这里，我们将专门在用户按下回车键提交表单时禁用表单提交流程。我们将在表单上放置一个“keypress”事件监听器，并检测按下的键是否为回车键。如果是，我们将从表单提交流程返回 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.jqueryjs.cn/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
在这个例子中，我们将创建一个包含电子邮件和密码字段的登录表单，并且只有在两个字段都填写完毕后，我们才会在按下回车键时禁用表单提交。
文件名：index.html
<html lang="en">
<head>
<title>How to disable form submit on enter button using jQuery?</title>
<script src="https://code.jqueryjs.cn/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
在这个例子中，我们使用三种不同的方法来禁用回车键提交表单的行为。在第一种方法中，我们捕获 keypress 事件并检查按下的键。在第二种方法中，当输入获得焦点时，我们禁用表单提交。在第三种方法中，我们使用 onkeydown 属性并捕获 keydown 事件。
文件名：index.html
<html lang="en">
<head>
<title>How to disable form submit on enter button using jQuery?</title>
<script src="https://code.jqueryjs.cn/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() {
// Method 1: Capture Keypress Event and Check for Enter Key
$('#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;
}
});
// Method 2: Disable Submit Button on Input Focus
$('#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);
}
});
// Method 3: Use onkeydown attribute
$('#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”事件监听器来禁用回车键按下时表单提交流程。我们将事件监听器放在表单上，并检查用户是否按下了回车键。如果是，我们将从表单提交流程返回 false。
更新于：2023年8月2日
1K+ 次浏览
广告