資料結構
網路
關係資料庫管理系統 (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.jquery.com/jquery-3.4.1.min.js"
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.jquery.com/jquery-3.4.1.min.js"
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.jquery.com/jquery-3.4.1.min.js" 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+ 次瀏覽
廣告