使用者在密碼欄位按 Enter 時，驗證帳號密碼非空並彈窗顯示 (模擬登入)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Enter 鍵送出示範</title>
<style>
body { background:#ccc; width:960px; margin:0 auto; }
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
用戶名：<input type="text" name="user" id="user"><br>
密碼：<input type="password" name="passwd" id="passwd">
<script>
$(function() {
// 針對 #passwd 綁定 keypress
$("#passwd").on("keypress", function(e) {
if (e.which === 13) { // Enter key code
var user = $("#user").val().trim();
var pass = $("#passwd").val().trim();
if (!user || !pass) {
alert("用戶名或密碼為空，請重新輸入！");
return;
}
alert("用戶名：" + user + "，密碼：" + pass);
// 實際專案：$(this).closest('form').submit(); 或 $.ajax(...)
}
});
});
</script>
</body>
</html>
| 項目 | 說明 |
|---|---|
| 事件選擇 | keypress 可捕捉字元鍵 (含 Enter)；keydown/keyup 亦可，但 keypress 在某些瀏覽器對非字元鍵不觸發。 |
| 鍵碼 | e.which (jQuery 正規化) 或 e.keyCode (原生)，Enter = 13。 |
| 綁定方式 | 推薦 .on("keypress", handler)，支援動態新增元素 (事件委派)。 |
| 表單送出 | 實務上應呼叫 form.submit() 或 AJAX，避免 alert 阻塞。 |
| 預設行為 | 若輸入框在 <form> 內，Enter 會觸發表單送出，可用 e.preventDefault() 阻止。 |
$("form").on("keypress", "input[type=text], input[type=password]", function(e) {
if (e.which === 13) {
e.preventDefault(); // 阻止瀏覽器預設送出
var $form = $(this).closest("form");
if ($form.valid()) { // 若使用 jQuery Validation
$form.submit(); // 或 ajaxSubmit
}
}
});
針對特定輸入框綁定 keypress，判斷 e.which === 13，驗證後送出，是最直觀的 Enter 鍵處理方式。現代專案建議搭配表單驗證庫與 AJAX 送出，提升使用者體驗。
