在一个 form 表单中,若只有一个 input,按回车键表单会自动提交,但是当表单中存在多个 input 时,按回车键不会执行任何操作,这是form表单的一个特性,那么如何防止它的自动提交呢?这里提供几种方法。
- 第一种方法,把表单去掉,这是最管用,但也是最傻的方法,直接添加onclick 事件,不用表单提交,这种方法就不赘述了。
- 第二种方法,很多人估计都想到过,就是既然一个 input 会自动提交,多个 input 就没问题,那么我给它多加一个 input 不就行了,有些人试过发现不行,那是为什么呢?因为他是这么写的 <input type="hidden">,这样当然不行,一个隐藏域,type 并不是 text,所以不行。但是,<input type="text" style="display: none;">,使用这种方法就可以了,因为它是用样式隐藏输入框的,实质上还是一个 type 为 text 的 input。
- 第三种方法,这种方法很好用,直接对 form 进行操作,个人推荐这种方式。直接在 form 上加上 onsubmit="return false;" 这段话,它会阻止表单的回车键进行提交。例:<form action="" method="post" onsubmit="return false;">
- 第四种方法,这种方法是直接对 input 进行操作,强行将回车键操作去掉,这种方式也不错,在 input 上加一个 onkeydown 事件,onkeydown="if(event.keyCode==13){return false;}",阻止回车键的操作。例:<input type="text" onkeydown="if(event.keyCode==13){return false;}">
以上四种方法都可以防止表单中只有一个 input 时,按回车键会自动提交表单的问题。