Form表单的输入框按Enter后，页面被刷新了
今天下午在实现一个通过在输入框按回车触发发送查询请求的前端实现，遇到了一个问题。整个表单非常的简单，一个输入框和一个按钮，点击按钮会触发绑定的提交的处理逻辑。在输入框中，按了回车，页面会被刷新了，导致页面回到了首页。Debug了一下，绑定的回车时间的代码是进去了，以及提交的处理逻辑也走完，但是就是会被刷新。一直觉得是否有什么地方，绑了什么事件，但是也没找到；感觉这个像是某种默认的DOM或者HTML的行为导致，因为自己写的js完全没有这个触发刷新的地方。后来网上找了资料，发现了问题所在。
form表单中的input的问题
当form表单中只有一个type为"text"的input标签时按回车键将会自动将表单提交。为了也验证是否是这个问题，下面是一个最简单的测试的html,：
<!DOCTYPE html>
<html>
<body>
<form name="test" >
输入框：<input type="text" name="name" />
<input type="button" value="Click" onclick="#" />
</form>
</body>
</html>
测试发现，只有一个type为"text"的input标签在form表单中时，是会自动提交，然后刷新页面。
解决方式
方式1：在在form中添加事件 onsubmit，例如下所示：
<form name="test" onsubmit="return" >
输入框：<input type="text" name="name" />
<input type="button" value="Click" onclick="#" />
</form>
方式2：因为一个input导致的，那么增加一个隐藏的输入框,就保证了多个type为"text"的input框，如下所示：
<form name="test" >
输入框：<input type="text" name="name" />
<input id="hiddenText" type="text" style="display:none" />
<input type="button" value="Click" onclick="#" />
</form>
方式3：全局去掉回车，不推荐
总结
果然，自己就是前端的菜鸡,好多都不清楚，所以只能踩踩坑，好好补补课…
46
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
