JavaScript 中的輸入鍵事件
Mehvish Ashiq
2023年10月12日
本教程演示了每次按下 Enter 鍵時使用 JavaScript enter key event 停止表單提交的不同方法。
注意
除了最後兩個之外，所有示例的 HTML 保持不變。
JavaScript 輸入關鍵事件以防止表單提交
在以下示例中，我們獲取 id 值為 form 的元素並將其儲存到 element 變數中。
之後，addEventListener() 方法用於將事件處理程式附加到元素。每當按下 Enter 鍵時，都會使用 event.preventDefault() 阻止表單提交。
你可以在 this頁面閱讀更多關於這個函式的資訊。event.key 告訴了鍵的名稱，event.which 顯示了鍵的程式碼。
HTML 程式碼：
<!DOCTYPE html>
<html>
<head>
<title>Enter Key Event</title>
</head>
<body>
<form action="#" method = "POST" id="form">
<label>First name:</label>
<input type="text" id="first-name" name="first-name">
<br />
<label>Last name:</label>
<input type="text" id="last-name" name="last-name">
<br />
<input id="submitBtn" type="submit" value="Submit" />
</form>
</body>
</html>
JavaScript 程式碼：
var element = document.getElementById('form');
element.addEventListener('keypress', function(event) {
if (event.key === 'Enter') {
alert(event.key + ' ' + event.which);
event.preventDefault();
}
});
在前面的示例中，我們正在檢測 <form> 元素中的 Enter。但是如果按下 Enter 鍵，下面給出的程式碼會阻止表單提交。
document.addEventListener('keypress', function(e) {
if (e.keyCode === 13 || e.which === 13) {
e.preventDefault();
return false;
}
});
/*we can write the same logic in jQuery as follows. You
can copy the jQuery code and uncomment to practice. Make
sure to include the jQuery library.*/
/*
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
*/
click 事件不會讓 Enter 鍵提交表單。
每次點選 id 值為 submitBtn 的元素時，都會提交表單。請參閱以下示例。
document.getElementById('submitBtn').addEventListener('click', function() {
form.submit();
});
不建議使用以下方法，因為 HTML 和 JavaScript 必須位於單獨的檔案中才能組織程式碼。
儘管如此，你也可以在 <input> 元素中使用 type=submit 中的 onkeypress 屬性，如果按下Enter 鍵，則會阻止表單提交。
我們也可以為每個輸入欄位使用這個屬性。檢查以下示例。
HTML 程式碼：
<!DOCTYPE html>
<html>
<head>
<title>Enter Key Event</title>
</head>
<body>
<form action="#" method = "POST" id="form">
<label>First name:</label>
<input type="text" id="first-name" name="first-name" onkeypress="return
(event.keyCode!=13);">
<br />
<label>Last name:</label>
<input type="text" id="last-name" name="last-name" onkeypress="return
(event.keyCode!=13);">
<br />
<input id="submitBtn" type="submit" value="Submit" onkeypress="return
(event.keyCode!=13);" />
</form>
</body>
</html>
我們還可以在 JavaScript 檔案中建立一個單獨的函式，並在單擊特定按鈕時呼叫它。只有單擊該按鈕，表單才會提交；否則，不是。
請參閱以下程式碼。
HTML 程式碼：
<!DOCTYPE html>
<html>
<head>
<title>Enter Key Event</title>
</head>
<body>
<form action="#" method = "POST" id="form">
<label>First name:</label>
<input type="text" id="first-name" name="first-name">
<br />
<label>Last name:</label>
<input type="text" id="last-name" name="last-name">
<br />
<input id="submitBtn" type="submit" value="Submit" onclick="myfunction()" />
</form>
</body>
</html>
JavaScript 程式碼：
document.addEventListener('keypress', function(e) {
if (e.keyCode === 13 || e.which === 13) {
e.preventDefault();
return false;
}
});
function myfunction() {
document.getElementById('form').submit();
}
作者： Mehvish Ashiq
