JavaScript中按下回车键触发按钮时如何阻止表单默认提交行为

问题根因 #

1. 你将keydown事件绑定在了搜索按钮上，但用户输入内容后按回车时，焦点停留在输入框内，不会触发按钮的键盘事件，你写的阻止默认行为的代码完全没有执行，触发了form表单的默认提交行为，所以出现页面跳转。
2. 按钮上写的onkeydown="handler(e)"中的e是未定义变量，就算事件触发也无法正常传递事件对象。
3. 你的HTML结构存在语法错误，<html>标签需要包裹所有页面内容，<link>样式引用标签要放在<head>标签内部，避免出现未知渲染异常。

解决方法 #

最简方案（无需修改JS代码） #

直接阻止form表单的默认提交行为，同时绑定提交触发搜索即可：

1. 将原form标签修改为：

<form class="example" onsubmit="event.preventDefault();searchFile();">

2. 删除按钮上多余的onkeydown="handler(e)"属性即可。

修改完成后，不管是点击搜索按钮，还是在输入框按回车，都会正常调用searchFile执行搜索，不会触发表单跳转。

保留原handler逻辑的修改方案 #

如果你需要保留现有的handler函数逻辑，做如下修改即可：

1. 给输入框绑定keydown事件，修改input标签为：

<input id ="query" type="text" placeholder="Insert a recipe.." name="search" value="" onkeydown="handler(event)">

2. 修改按钮的点击事件，传入click标识：

<button id="searchRecipe" type="button" onclick="handler('click')"><i></i>Search</button>

3. 可删除handler函数中重复写的第二次event.preventDefault()，冗余代码不影响运行但无实际作用。

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