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. DOS底下常用命令

    DOS底下常用命令: dir (directory) :列出当前目录下的文件以及文件夹 md (make directory): 创建目录 rd (remove directory):删除目录 cd ...

  2. Codeforces 149D Coloring Brackets（树型DP）

    题目链接 Coloring Brackets 考虑树型DP.(我参考了Q巨的代码还是略不理解……) 首先在序列的最外面加一对括号.预处理出DFS树. 每个点有9中状态.假设0位不涂色,1为涂红色,2为 ...

  3. [原创][FPGA]Quartus中调用Modelsim波形仿真步骤说明

    0. 简介 在使用QuartusII软件的过程中,经常地需要跑仿真,那么说到仿真就不得不说Modelsim这个仿真软件了,我们这里介绍下该软件在QuartusII中的使用方法. 1. 建立Quartu ...

  4. FMDB使用SQLite事务Save Point

    FMDB使用SQLite事务Save Point   在SQLite中,事务提供了批量处理,批量撤销的功能.当批量操作中有一步无法完成操作,就会把执行过的语句都撤销,恢复到撤销前的状态.但是由于SQL ...

  5. python pip包管理器安装

    下载   http://peak.telecommunity.com/dist/ez_setup.py 执行:python ez_setup.py 下载:  http://pypi.python.or ...

  6. DNS入门（转）

    转自:阮一峰的网络日志 作者: 阮一峰 DNS 是互联网核心协议之一.不管是上网浏览,还是编程开发,都需要了解一点它的知识. 本文详细介绍DNS的原理,以及如何运用工具软件观察它的运作.我的目标是,读 ...

  7. 10.【nuxt起步】-引用mintui

    这时候我们完成了list.vue,但是怎么返回index.vue,这时候需要这个头部返回 1.我们使用现成的minu-ui,eleme的开源移动端 ,参考 https://www.cnblogs.co ...

  8. Exchange 2013 Database Move to New Partition

    建议不要删除默认数据库,可以通过修改默认数据库名称.路径等实现您的需求. 客戶:The HK Anti-Cancer Society. 要求:遷移數據庫(01)到新分區,實際是遷移成為數據庫(05)  ...

  9. 记事本中写c/c++程序在Windows下运行

     1.在桌面新建一个1.c,内容例如以下: 2．打开cmd命令行窗体,进入CodeBlock安装文件夹下的:E:\Installed\CodeBlocks\MinGW.然后运行mingwvars. ...

  10. run kubernetes

    use kubeadm in lab only,,, do not use it in production      install docker 1.12.6 -..   please noted ...