如何在无文本框的闪卡页面中捕获回车键触发Flip按钮？

有两种简单的方法可以实现回车键触发Flip按钮的功能，无需添加额外输入框：

方法1：利用表单默认提交行为（推荐） #

默认情况下，表单内的按钮指定type="submit"后，即便没有输入框，多数浏览器也能响应回车键触发submit事件。只需给按钮添加类型属性，并在处理函数中阻止页面刷新的默认行为：

<form onsubmit="handle(event)">
  <p>Card Data</p>
  <button type="submit">Flip</button>
</form>
<script>
function handle(e) {
  e.preventDefault(); // 阻止表单提交导致的页面刷新
  console.log("Enter Pressed");
  // 在此添加闪卡翻转的具体逻辑
}
</script>

方法2：全局监听回车键事件 #

直接监听文档的键盘按下事件，判断是否为回车键，若是则主动触发按钮的点击动作：

<p>Card Data</p>
<button id="flipBtn">Flip</button>
<script>
const flipBtn = document.getElementById('flipBtn');

// 绑定按钮点击逻辑
flipBtn.addEventListener('click', () => {
  console.log("Flip clicked");
  // 闪卡翻转逻辑
});

// 监听回车键
document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    flipBtn.click();
  }
});
</script>

注意事项 #

• 若部分浏览器不支持无输入框的表单回车提交，方法2是更通用的兼容方案。
• 使用方法2时，若页面存在其他需要回车键的功能，可将监听范围缩小到闪卡容器内，避免冲突。

内容的提问来源于stack exchange，提问作者Greg Gum