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. AC日记——[Sdoi2013]森林 bzoj 3123

    3123: [Sdoi2013]森林 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 3216  Solved: 944[Submit][Status] ...

  2. 断路器Hystrix与Turbine集群监控-Spring Cloud学习第三天(非原创）

    文章大纲 一.Hystrix基础介绍二.断路器Hystrix简单使用三.自定义Hystrix请求命令四.Hystrix的服务降级与异常处理五.Hystrix的请求缓存与请求合并六.Hystrix仪表盘 ...

  3. Leetcode总结之Tree

    package Tree; import java.util.ArrayList; import java.util.Arrays; import java.util.Collections; imp ...

  4. Eclipse工程中Java Build Path中的JDK版本和Java Compiler Compiler compliance level的区别（转）

    在这里记录一下在eclipse中比较容易搞混淆和设置错误的地方.如下图所示的功能: 最精准的解释如下: Build Path是运行时环境  Compiler是编译时环境  假设,你的代码用到泛型,Bu ...

  5. javascript好文 --- 深入理解可视区尺寸client

    可视区大小 可视区大小client又称为可见大小或客户区大小,指的是元素内容及其内边距所占据的空间大小 clientHeight clientHeight属性返回元素节点的可见高度 clientHei ...

  6. 【spring mvc】后台spring mvc接收List参数报错如下：org.springframework.beans.BeanInstantiationException: Failed to instantiate [java.util.List]: Specified class is an interface

    后台spring mvc接收List参数报错如下:org.springframework.beans.BeanInstantiationException: Failed to instantiate ...

  7. 第六讲_图像分割Image Segmentation

    第六讲_图像分割Image Segmentation 语义分割(semantic segmentation) 常用神经网络介绍对比-FCN SegNet U-net DeconvNet 目录 +三大数 ...

  8. 如何在Linux中使用sFTP上传或下载文件与文件夹

    如何在Linux中使用sFTP上传或下载文件与文件夹 sFTP(安全文件传输程序)是一种安全的交互式文件传输程序,其工作方式与 FTP(文件传输协议)类似. 然而,sFTP 比 FTP 更安全;它通过 ...

  9. PS 如何制作WIN7的玻璃化透明窗口效果

    1 绘制一个圆角矩形,并将不透明度设为16%以及添加投影效果   2 再次添加外发光效果   3 新建一个图层,再填充一下这个圆角矩形(可以填充为任意颜色,只要和别的颜色区分开来)   4 选中这个区 ...

  10. 关于CUDA两种API:Runtime API 和 Driver API

                 CUDA 眼下有两种不同的 API:Runtime API 和 Driver API,两种 API 各有其适用的范围. 高级API(cuda_runtime.h)是一种C++ ...