HTML from表单中只有一个input时,按回车键后表单自动提交(form表单的一个小坑)
问题
按钮绑定回车事件后按回车表单执行js方法后表单自动提交刷新,先执行了js的方法后自动提交表单,使它相当于没有执行js方法,查阅资料得知在一个form表单中,若只有一个input,按回车键表单会自动提交,但是当表单中存在多个input时,按回车键不会执行任何操作,这是form表单的一个特性。然而,很多情况下,我们不需要自动提交。
解决方案
- 方案一:很多人估计都想到过,就是既然一个input会自动提交,多个input就没问题,那么我给它多加一个input不就行了,有些人试过发现不行,那是为什么呢?
因为他是这么写的<input type="hidden">,这样当然不行,一个隐藏域,type并不是text,所以不行。
但是,<input type="text" style="display:none;">,使用这种方法就可以了,因为它是用样式隐藏输入框的,实质上还是一个type为text的input。 - 方案二:直接对form属性进行操作,个人推荐这种方式。直接在form上加上οnsubmit="return false;"这个属性,它会阻止表单的回车键进行提交。