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

基本表单如下:

<html>

    <head></head>

    <body>

        <form action='XXX' name='searchForm' method='post'>

           查询: <input type='text' />

        </form>

    </body>

</html>

解决方法有以下几种：

1.添加一个无用的 input 框

<input type='text' style='display: none;' />

2.阻止表单的回车键进行提交

<form action='XXX' name='searchForm' method='post' onsubmit='return false'>

date: 2018-02-27 11:18:05

本文由个人 hexo 博客 co2fe.com 迁移

遇到的一个Form表单自动提交问题解决办法的更多相关文章

  1. JavaScript 创建一个 form 表单并提交

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

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

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

  3. form表单自动提交

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

  4. （转）一个form表单实现提交多个action

    方法一: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 ...

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

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

  6. 直接提交一个form表单后台返回一个新页面通过target属性可以放到iframe当中

    问题描述: 我想提交一个form表单后台直接返回一个新页面,但是当前页面还不想被替换掉: 解决方案: 在页面中添加一个iframe将form表单的target属性设置为iframe的id这样的话返回的 ...

  7. 获取html 中的内容 将前台的数据获取到后台 用 jquery 生成一个 form表单 提交数据

    使用js创建一个form表单 ,使用post上传到后台中 下面是代码.在获取html内容的时候使用了js节点来获取内容. parent:父节点.上一级的节点 siblings:兄弟节点.同一级别的节点 ...

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

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

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

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

随机推荐

  1. IOS-input元素光标偏移乱跑，是什么原因

    这中情况只会出现在一些ios手机上,是兼容性的问题,当然我没有认真的确认过是出现在那些ios系统上的: 之所以出现这种情况,肯定是在input上或TA的父元素上用到了position:fixed; 目 ...

  2. Codeforces 23E Tree（树型DP）

    题目链接 Tree $dp[x][i]$表示以x为根的子树中x所属的连通快大小为i的时候 答案最大值 用$dp[x][j]$ * $dp[y][k]$ 来更新$dp[x][j + k]$. (听高手说 ...

  3. bzoj 4921: [Lydsy六月月赛]互质序列

    4921: [Lydsy六月月赛]互质序列 Time Limit: 1 Sec  Memory Limit: 256 MBSubmit: 188  Solved: 110[Submit][Status ...

  4. Nessus虚拟机的几个问题解决办法

    1.使用ppp的校园网或者家庭宽带无法通过桥接上网. 这时要把这俩网卡变成NAT模式就行. 2.国外下载插件包(或者过慢). 我这里贡献个高速链接.base64,懂得自然懂. c3NyOi8vTkRj ...

  5. Hystrix的介绍和简单使用

    这周在看项目的相关代码时,接触到了Hystrix,因此查询了相关资料学习了下. 一.什么是Hystrix Hystrix是Netflix针对微服务分布式系统的熔断保护中间件,当我们的客户端连接远程的微 ...

  6. 蜗牛—Android基础之button监听器

    XML文件中有一个textView 和 一个button. <LinearLayout xmlns:android="http://schemas.android.com/apk/re ...

  7. javacript中apply和call的区别

    apply:方法能劫持另外一个对象的方法,继承另外一个对象的属性.   接受的参数是一个字符串. call:和apply的意思一样,只不过是参数列表不一样. 接收的参数是一个数组. 例如: <s ...

  8. cocos2d-x项目101次相遇:在HelloWorld上－－建立新场景

    cocos2d-x 101次相遇 / 文件夹  1   安装和环境搭建 -xcode  2   Scenes , Director, Layers, Sprites 3   建立图片菜单  4   在 ...

  9. grep man 有删减 百科

    NAME grep, egrep, fgrep, rgrep - print lines matching a pattern SYNOPSIS grep [OPTIONS] PATTERN [FIL ...

  10. python--软件规范和反射

    软件开发规范 写一个作业的时候,要将写的代码分开  bin文件夹里面第一个是start文件  核心代码都在core文件夹里面  文件core最好也是固定名字 BaseDir=os.path.dirna ...