如何使用 JavaScript 在文本框中按下 Enter 键后触发 HTML 按钮?
通常,开发人员会添加提交按钮来提交输入字段的文本。但是,如果他们允许用户通过按 Enter 键提交输入值,则可以改善应用程序的用户体验。
在这里,我们将学习使用按键监听器事件检测按键的一般方法。之后,只要用户按下 Enter 键,我们就可以执行任何操作。
语法
用户可以按照以下语法来检测用户按下 Enter 键的情况。
input.addEventListener("keypress", function (event) { if (event.keyCode == 13) { // 按下 Enter } });
在上述语法中,我们已将事件监听器添加到输入中。每当用户按下任何键时,都会触发 addEventListner() 方法的回调函数。之后,我们检查所按下键的 keycode。如果 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 submitInput() { input.value = ""; output.innerHTML += "Input value submitted!"; } // 检测按键事件的函数 input.addEventListener("keypress", function (event) { // 检测事件键 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 submitInput() { input.value = ""; output.innerHTML += "<br>Input value submitted!"; alert("Button code executed."); } // 检测按键事件的函数 input.addEventListener("keydown", function (event) { // 检测事件键 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 键。