資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 jQuery 在回車鍵上提交表單？
jQuery - 一個非常流行的 JavaScript 庫，它簡化了 HTML 文件操作、事件處理和動畫的過程。它包含一組用於遍歷、操作和修改頁面上 HTML 元素的函式。它還具有跨瀏覽器相容性，並與大多數現代瀏覽器無縫協作。
無論是在登入頁面、聯絡我們部分等表單形式，我們始終都在網站上使用表單。在那裡，我們總是必須透過點選按鈕來提交表單，但如何才能使用 Enter 鍵提交表單呢？提交表單是 Web 開發中的一個常見需求。這是一個可以節省時間並提供更好使用者體驗的有用功能。藉助 jQuery 庫，可以輕鬆高效地完成此操作。
在本文中，我們將學習如何使用 jQuery 在 Enter 鍵上提交表單。我們還將學習執行此任務的不同方法。在 jQuery 中，使用 Enter 鍵或按鈕提交表單的一些常用方法是使用“keypress”事件、“keydown”事件和“keyup”事件。
在 jQuery 中使用 Enter 鍵提交表單的方法
有多種方法可以使用 jQuery 在 Enter 鍵上提交表單。讓我們看看在 Enter 鍵上提交表單的一些常用方法。
方法 1：使用 Keypress 事件
在這種方法中，我們將使用 keypress 事件來使用 jQuery 在 Enter 鍵上提交表單。當焦點位於元素上時按下某個鍵時會觸發 keypress 事件，要提交表單，我們必須檢查按下鍵的鍵碼是否等於 Enter 鍵的程式碼（即 13）。如果正確，則可以觸發表單的提交方法。
語法
以下是使用 jQuery 中的 keypress 事件在 Enter 鍵上提交表單的語法。
$(document).on("keypress", "form", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
alert("You have successfully submitted the form!");
$(this).submit();
}
});
示例
給定的示例使用“keypress”事件來檢測使用者在表單元素上聚焦時釋放 Enter 鍵的時間。$(this).submit() 行用於在顯示警報訊息後提交表單。
<html>
<head>
<title>Submit Form on Enter Key using keypress event</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form>
<label for="email">Enter your email:</label>
<input type="text" id="email" name="email" required>
<br><br>
<label for="password">Enter your password:</label>
<input type="password" id="password" name="password" required>
<br><br>
<input type="submit" value="Submit">
</form>
<script>
$(document).on("keypress", "form", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
// Alerts the user when the Enter key is pressed
alert("You have successfully submitted the form!");
$(this).submit();
}
});
</script>
</body>
</html>
方法 2：使用 Keyup 事件
在這種方法中，我們將使用 keyup 事件來使用 jQuery 在 Enter 鍵上提交表單。當按下某個鍵但在實際釋放之前會觸發 Keyup 事件。在這裡，要提交表單，請確保按下鍵的鍵碼是否等於 Enter 鍵的程式碼（即 13）。如果是，則事件將被觸發。
語法
以下是使用 jQuery 中的 keyup 事件在 Enter 鍵上提交表單的語法。
$(document).on("keyup", "form", function(event){
if (event.keyCode === 13) {
event.preventDefault();
alert("You have successfully submitted the form!");
$(this).submit();
}
});
示例
給定的示例使用“keyup”事件來檢測使用者在表單元素上聚焦時釋放 Enter 鍵的時間。$(this).submit() 行用於在顯示警報訊息後提交表單。
<html>
<head>
<title>Submit Form on Enter Key using keyup event</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form>
<label for="email">Enter your email:</label>
<input type="text" id="email" name="email" required>
<br><br>
<label for="password">Enter your password:</label>
<input type="password" id="password" name="password" required>
<br><br>
<input type="submit" value="Submit">
</form>
<script>
$(document).on("keyup", "form", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
// Alerts the user when the Enter key is pressed
alert("You have successfully submitted the form!");
$(this).submit();
}
});
</script>
</body>
</html>
方法 3：使用 Keydown 事件
在這種方法中，我們將使用 keydown 事件來使用 jQuery 在 Enter 鍵上提交表單。當按下某個鍵並在釋放後會觸發 keydown 事件。在這裡，要提交表單，請確保按下鍵的鍵碼是否等於 Enter 鍵的程式碼（即 13）。如果是，則事件將被觸發。
語法
以下是使用 jQuery 中的 keydown 事件在 Enter 鍵上提交表單的語法。
$(document).on("keydown", "form", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
alert("You have successfully submitted the form!");
$(this).submit();
}
});
示例
給定的示例使用“keydown”事件來檢測使用者在表單元素上聚焦時釋放 Enter 鍵的時間。$(this).submit() 行用於在顯示警報訊息後提交表單。
<html>
<head>
<title>Submit Form on Enter Key using keydown event</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<form>
<label for="email">Enter your email:</label>
<input type="text" id="email" name="email" required>
<br><br>
<label for="password">Enter your password:</label>
<input type="password" id="password" name="password" required>
<br><br>
<input type="submit" value="Submit">
</form>
<script>
$(document).on("keydown", "form", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
// Alerts the user when the Enter key is pressed
alert("You have successfully submitted the form!");
$(this).submit();
}
});
</script>
</body>
</html>
結論
jQuery 是一個廣泛使用的 JavaScript 庫，它簡化了 HTML 文件操作、事件處理和動畫的過程。該庫有多種方法可用於使用 jQuery 在 Enter 鍵上提交表單。keypress、keyup 和 keydown 事件是提交表單最常用的方法。每種方法都涉及檢測 Enter 鍵的鍵碼並觸發表單的提交方法。透過實現這些方法，Web 開發人員可以透過允許使用者使用 Enter 鍵提交表單來提供更好的使用者體驗。
4K+ 次瀏覽
