資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 JavaScript 在文字框中按下回車鍵後觸發 HTML 按鈕？
通常，開發人員會新增提交按鈕來提交輸入欄位的文字。但是，如果他們允許使用者透過按下 Enter 鍵提交輸入值，則可以改善應用程式的使用者體驗。
在這裡，我們將學習使用鍵盤監聽器事件檢測按鍵的通用方法。之後，每當使用者按下 Enter 鍵時，我們都可以執行任何操作。
語法
使用者可以按照以下語法來檢測使用者何時按下 Enter 鍵。
input.addEventListener("keypress", function (event) {
if (event.keyCode == 13) {
// enter pressed
}
});
在以上語法中，我們已將事件監聽器新增到輸入框。每當使用者按下任何鍵時，它都會觸發 addEventListner() 方法的回撥函式。之後，我們檢查所按按鍵的鍵碼。如果 keyCode 等於 13，則表示按下了 Enter 鍵。
示例 1
在下面的示例中，我們建立了輸入欄位。此外，我們還建立了提交按鈕，該按鈕呼叫 submitInput() 函式並清空輸入欄位。
此外，我們已在 JavaScript 中透過 id 訪問了輸入框，並在輸入欄位上添加了 addEventListner() 方法。我們在 addEventListner() 方法中添加了 keypress 事件。
event.keyCode 返回所按按鍵的程式碼，如果它等於 13，則表示使用者按下了 Enter 鍵，我們需要提交輸入值。
<html>
<body>
<h3> Using the <i> KeyPress </i> event to detect whenever user presses the enter. </h3>
<p> Enter some text in the text box below and hit enter button </p>
<input type = "text" id = "text_input">
<br> <br>
<button type = "submit" onclick = "submitInput()"> Submit </button>
<div id = "output"> </div>
</body>
<script>
let output = document.getElementById('output');
let input = document.getElementById('text_input');
// function for submitInput button
function submitInput() {
input.value = "";
output.innerHTML += "Input value submitted!";
}
// function to detect keypress event
input.addEventListener("keypress", function (event) {
// detect event key
if (event.keyCode == 13) {
input.value = "";
output.innerHTML += "<br>Input value submitted!";
alert("Button code executed.");
}
});
</script>
</html>
示例 2
在下面的示例中，我們使用了 keydown 事件來檢測使用者是否按下了任何鍵。每當使用者按下任何鍵時，它都會觸發 keydown 事件，之後我們可以使用 keyCode 的值確保使用者按下了 Enter 鍵。
每當使用者按下 Enter 鍵時，我們都會呼叫 submitInput() 函式，而不是在 addEventListner() 方法的回撥函式中處理提交輸入值。
<html>
<body>
<h3> Using the <i> Keydown </i> event to detect whenever user presses the enter. </h3>
<p> Enter some text in the text box below and hit enter button </p>
<input type = "text" id = "text_input">
<br> <br>
<button type = "submit" onclick = "submitInput()"> Submit </button>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let input = document.getElementById('text_input');
// function for submitInput button
function submitInput() {
input.value = "";
output.innerHTML += "<br>Input value submitted!";
alert("Button code executed.");
}
// function to detect keypress event
input.addEventListener("keydown", function (event) {
// detect event key
if (event.keyCode == 13) {
submitInput();
}
});
</script>
</body>
</html>
示例 3
在下面的示例中，我們使用了“keyup”事件，該事件在使用者按下任何鍵後釋放時觸發。此外，我們還使用 addEventListner() 方法在按鈕上添加了點選事件監聽器。
<html>
<body>
<h3> Using the <i> Keyup </i> event to detect whenever user presses the enter</h3>
<p> Enter some text in the text box below and hit enter button </p>
<input type = "text" id = "text_input">
<br> <br>
<button type = "submit" id = "btn"> Submit </button>
<div id = "output"> </div>
</body>
<script>
let output = document.getElementById('output');
let input = document.getElementById('text_input');
let btn = document.getElementById('btn');
btn.addEventListener('click', function () {
input.value = "";
output.innerHTML = "Input value submited!";
})
input.addEventListener("keydown", function (event) {
if (event.keyCode == 13) {
input.value = "";
output.innerHTML = "<br>Input value submited!";
alert("Button code executed.");
}
});
</script>
</html>
開發人員學習瞭如何使用 Enter 鍵提交輸入值或表單。我們可以使用 keypress、keydown 或 keyup 任何事件透過按下 Enter 鍵來觸發表單提交。所有三個事件都會在使用者按下任何鍵時觸發，因此我們需要檢查 keyCode 屬性的值以確保使用者按下了 Enter 鍵。
5K+ 瀏覽量
