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. 逆向碰到3des分析

    1.ios 某个app碰到涉及3des的解密函数. 2.底层调用的库函数. 3.对比CCCrypt的头文件 CCCryptorStatus CCCrypt( CCOperation op, /* kC ...

  2. 【Android】使用 SwipeRefreshLayout 实现下拉刷新

    今天在codepath 上看到一个开源项目 [点击查看]使用到了 SwipeRefreshLayout 实现了下拉刷新,但演示样例并不完整,于是自己就动手写了下.之前看到郭霖的博客上也有介绍下拉刷新, ...

  3. Python extensions for Windows

    Python extensions for Windows pywin32 214 Python extensions for Windows Maintainer: Mark Hammond Hom ...

  4. luogu1155 双栈排序

    题目大意 运用两个栈的push和pop操作使得一个序列单调递增且操作字典序最小.$n\leq 1000$. 题解 本题我们要尝试运用“瞪眼法”,也就是推样例.我们显然要数字尽可能地推入第一个栈.那么问 ...

  5. ip(点分十进制 <==> 二进制整数)之间的转换

    linux的套接字部分比较容易混乱,在这里稍微总结一下. 地址转换函数在地址的文本表达式和它们存放在套接字地址结构中的二进制值进行转换. 地址转换函数有四个:其中inet_addr 和 inet_nt ...

  6. 7-80 HTML5新增的JS选择器

    7-80 HTML5新增的JS选择器 学习要点 HTML5新增的JS选择器 在传统的 JavaScript 开发中,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 ta ...

  7. 【Silverlight】Bing Maps学习系列(四):使用图钉层(Pushpin layer)及地图图层(MapLayer)(转)

    [Silverlight]Bing Maps学习系列(四):使用图钉层(Pushpin layer)及地图图层(MapLayer) 如果我们需要在Bing Maps中加入一个小图钉标记,该如何实现了? ...

  8. luogu 3371 【模板】单源最短路径

    我太菜了 今天才学会堆优化的dij #include<iostream> #include<cstdio> #include<algorithm> #include ...

  9. 洛谷 P1314 聪明的质监员 —— 二分

    题目:https://www.luogu.org/problemnew/show/P1314 显然就是二分那个标准: 当然不能每个区间从头到尾算答案,所以要先算出每个位置被算了几次: 不知为何自己第一 ...

  10. nginx开发(四)调用ffmpeg,搭建rtmp直播流。

    1: 修改conf文件,配置rtmp直播 打开usr/local/nginx/conf/nginx.conf,添加红色内容: rtmp {#rtmp点播配置    server {        li ...