form中只有一个input按回车键表单会自动提交

在一个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="save.do" 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时,按回车键会自动提交表单的问题。
 
若你还有其他方法解决这个问题,欢迎在下方留下你的方式,大家一起讨论,一起进步,做一只有梦想的网虫!

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

  1. form表单 一个input时 回车自动提交

    问题描述 form表单中,如果当前表单只有一个input输入框时,单击回车会自动提交当前表单. 解决方案 在当前form表单中添加一个隐藏的input, <input style="d ...

  2. FORM中使用onSubmit="return false"防止表单自动提交,以及submit和button提交表单的区别

    在页面中有多个input type="text"的文本输入框的情况下没有问题,但是当页面中有只有一个文本框的情况下(),就会出现此问题. 后来在form 中添加:onsubmit= ...

  3. chrome、firefox表单自动提交诱因 -- 非type=hidden的单输入域(input)

    开发任务中遇到很费解的一个form自动提交问题,form中只有一个input时回车会触发自动提交表单,当在多一个非type=hidden的input时,又不会出现表单自动提交. 代码示例: 会出现自动 ...

  4. Html 中表单提交的一些知识总结——防止表单自动提交,以及submit和button提交表单的区别

    转自:http://jackaudrey.blog.163.com/blog/static/1314217882010590041833/ 在页面中有多个input type="text&q ...

  5. 按下enter键后表单自动提交问题

    在HTML的form表单里,按下enter键之后,默认情况下表单会自动提交. 在公司一个项目里,按下enter键自动提交表单的查询结果与按下搜索框的搜索结果页面显示不一样,按下搜索按钮之后是通过Aja ...

  6. 遇到的一个Form表单自动提交问题解决办法

    Form 表单中只有一个 input 元素时按回车会默认提交表单.有的时候我们希望按回车可以进行列表查询,但是查询后表单被自动提交了,然后刷新了整个页面.这个时候就需要对这个 Form 表单处理一下以 ...

  7. HTML 之 Web页面表单form中只有一个input的text元素,按回车默认提交

    WEB开发中,如果页面的 form 中只有一个input元素,在该input元素的输入框中按回车(注:此时并没有写对应的onkeydown等事件处理),则浏览器会默认提交表单,请看如下代码: < ...

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

    怪事年年有,今年特别多. 话说,最近项目中遇到一件怪事,当我鼠标focus在文本框中,轻轻敲了下回车键,尼玛页面突然刷新了,当时把宝宝给吓得. 接下来就是一番苦逼的烧脑和蛋疼~ 一.被表象所迷惑 突然 ...

  9. form表单自动提交

    form表单提交是web项目中经常遇到的,但是如果form中只有一个input为text类型的输入框时, 需要格外注意,因为这时候只要你按下回车键,form表单就会自动提交,这是form表单的一个特性 ...

随机推荐

  1. 深度理解apache 重写模块rewrite_mod,重写不再犯错

    1.RewriteRule ^(com\/.*)$ index.php?do=$1 问:上面的规则匹配表达式 "^(.*)$" 匹配的内容是什么 答:匹配内容是URI站点目录:/d ...

  2. HDU 5976 Detachment 【贪心】 (2016ACM/ICPC亚洲区大连站)

    Detachment Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total ...

  3. ios20--xib2

    故事板控制器: // // ViewController.m // 03-通过xib自定义商品的View #import "ViewController.h" #import &q ...

  4. xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is

    method: select Xcode version in Command Line Tools in Location(Click Xcode and then Preferences) Bef ...

  5. oracle-扫盲贴:存储过程实现增删改查

    原文引入:http://blog.csdn.net/yangzhawen/article/details/8617179 oracle-扫盲贴:存储过程实现增删改查 分类: oracle2013-02 ...

  6. 关于redis、memcache、mongoDB的对比

    从以下几个维度,对 Redis.memcache.MongoDB 做了对比.1.性能都比较高,性能对我们来说应该都不是瓶颈.总体来讲,TPS 方面 redis 和 memcache 差不多,要大于 m ...

  7. 5 Application 对象

    5.1鸟瞰Application对象 5.2 必须了解的面向显示特性 5.2.1 使用ScreenUpdating改进和完善执行性能 代码清单5.1:实现屏幕更新的性能 '代码清单5.1: 实现屏幕更 ...

  8. linux下的C语言开发(静态库/动态库)

    动态链接库不是Linux独有的特性,在windows下面也存在这样的特性.一般来说,windows下面的动态连接库是以*.dll作为结尾的,而linux下面的动态连接库是以*.so结尾的.和静态链接库 ...

  9. JSP-Runoob:JSP简介

    ylbtech-JSP-Runoob:JSP简介 1.返回顶部 1. JSP 简介 什么是Java Server Pages? JSP全称Java Server Pages,是一种动态网页开发技术.它 ...

  10. bzoj1509

    树的直径 我先开始以为是个图,想想并不知道什么求图的直径的方法,结果是棵树 那么直觉告诉我们是在直径上面,实际上就是直径+min(i->u,i->v),扫一遍就行了 #include< ...