form表单中只有一个input时,按回车键后表单自动提交(form表单的一个小坑)

按钮绑定回车事件后按回车表单执行js方法后表单自动提交刷新,先执行了js的方法后自动提交表单,使它相当于没有执行js方法,查阅资料得知在一个form表单中,若只有一个input,按回车键表单会自动提交,但是当表单中存在多个input时,按回车键不会执行任何操作,这是form表单的一个特性。

解决这个问题有四种方法,如下:

第一种方法,把表单去掉,这是最管用,但也是最傻的方法,直接添加onclick事件,不用表单提交,这种方法就不赘述了。

第二种方法,很多人估计都想到过,就是既然一个input会自动提交,多个input就没问题,那么我给它多加一个input不就行了,有些人试过发现不行,那是为什么呢?

因为他是这么写的,这样当然不行,一个隐藏域,type并不是text,所以不行。

但是,,使用这种方法就可以了,因为它是用样式隐藏输入框的,实质上还是一个type为text的input。

第三种方法,这种方法很好用,直接对form进行操作,个人推荐这种方式。直接在form上加上onsubmit="return false;"这段话,它会阻止表单的回车键进行提交。

例:

第四种方法,这种方法是直接对input进行操作,强行将回车键操作去掉,这种方式也不错,在input上加一个onkeydown事件,

onkeydown="if(event.keyCode==13){return false;}",阻止回车键的操作。

例:

以上四种方法都可以防止表单中只有一个input时,按回车键会自动提交表单的问题。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 我们有时候希望回车键敲在文本框(input element)里来提交表单(form),但有时候又不希望如此。比如搜...
    妖姬002阅读 3,045评论 0 1
  • 越早会笑的婴儿越聪明? 微笑是一种本能,在不经意间,宝贝的一个微笑总是能够融化你的心!但是在宝贝的笑容背后,又有哪...
    a33795b49045阅读 723评论 0 1
  • 看不见星星的城市夜里 独自一人心中把你来念 想和你一起谈一场爱恋 不知不觉终生为你而骗
    回味录阅读 171评论 1 2
  • ——家是避风的港口,但有时候也是装满负能量的垃圾桶。请将工作上与朋友的微笑带进你的家里,别让家成为你一个人的家,家...
    田小飞_855f阅读 234评论 0 0
  • 第16天 继续多任务之旅。前一天实现了两个任务之间自动切换,今天开始写一个更通用的多任务切换程序。 首先定义存储每...
    whatcanhumando阅读 747评论 0 0