按Enter键后Form表单自动提交的问题

Posted 2020-06-17

  怪事年年有，今年特别多。

  话说，最近项目中遇到一件怪事，当我鼠标focus在文本框中，轻轻敲了下回车键，尼玛页面突然刷新了，当时把宝宝给吓得。

  接下来就是一番苦逼的烧脑和蛋疼~

一、被表象所迷惑

  突然出现这种情况，脑海中第一反应是，keydown事件是不是出问题了，然后找啊找啊找啊，然后没有然后。

  在把input元素上的所有事件移除掉后，我自信的按了一下enter键。艾玛，又刷新了。心里那个苦哎。

二、列出所有可能

  一阵捣鼓之后，脑海中列出了所有按下enter键后的改变，url改变，多了一个问号和参数，页面刷新。心中顿时有个想法，然后确定了一下input元素在form中。这是大致可以得出原因应该是按下enter键后，表单提交了。尼玛，这是什么鬼。

三、水落石出 开心o(*￣▽￣*)ブ

  找到原因后，有不知道为什么。这时候只能搬出度娘了，结果得出当表单中只有一个input输入元素时，点击enter键，form表单会自动提交。

四、结论

  其实知道原因解决起来还是很简单的，比如多加一个input元素设置display:none，利用事件阻止表单提交等等。下面是列出我的solution

1 <form onsubmit="return false">
2     <input type="text" name="test"/>
3 </form>

  总的来说，适合自己的才是好的，遇到问题要仔细分析，跟着感觉走，不要盲目相信经验。当一个问题花了比较多的时间，就要反思是否思路不对还是方法有误，要跳出固定思维，抽丝拨茧地去分析所有可能的原因。