文本框回车键触发按钮单击，轻松实现用户友好体验

2024-03-14 12:52:20

在文本框中按回车键触发按钮单击

背景

在需要用户在文本框中输入文本后触发按钮操作的场景中，使用鼠标单击按钮可能不如使用回车键方便。本文将介绍一种使用 JavaScript 在文本框中按回车键时触发按钮单击的解决方案。

解决方法

添加事件监听器： 为文本框元素添加一个 "keyup" 事件监听器，该事件监听器将在用户松开键盘上的任意键时触发。
检查回车键： 在 "keyup" 事件中，检查事件是否是由按回车键（ASCII 码为 13）触发的。
触发按钮单击： 如果按回车键，则触发按钮的 "click" 事件。

JavaScript 代码：

document.getElementById("txtSearch").addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
    document.getElementById("btnSearch").click();
  }
});

代码说明

document.getElementById("txtSearch") ：获取文本框元素的引用。
addEventListener("keyup", function(event)) ：添加一个 "keyup" 事件侦听器。
if (event.keyCode === 13) ：检查是否按下了回车键。
document.getElementById("btnSearch").click() ：触发按钮的 "click" 事件。

示例

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

<script>
// JavaScript 代码如上
</script>

附加说明