如何让form表单在enter键入时不提交
今天在做我的一个小玩意 在线聊天工具的时候
form表单只有一个text和一个button每当我键入enter的时候就刷新。很是郁闷,直接在form上onsumbit=false。才行。
下面是我查询到的结果。
1.form表单回车后自动提交总结
默认情况下,一个文本框的时候,提交,不管按钮type是submit还是button
一个文本框的时候怎么才能做到不提交,方法是加一个隐藏掉的文本框
只要有type为submit的按钮存在,一个文本框还是多个文本框都提交
多个文本框的时候,不提交,用type为button的按钮就行啦
用button元素时,FX和IE下有不同的表现
radio和checkbox在FX下也会触发提交表单,在IE下不会
type为image的按钮,等同于type为submit的效 果
2. 如果 onsubmit 句柄返回 fasle,表单的元素就不会提交。如果该函数返回其他值或什么都没有返回,则表单会被提交。
由于 onsubmit 句柄可以取消表单的提交,所以它对于进行表单验证是十分理想的;
这样的话,修改form的onsubmit事件可以让敲入回车的时候执行我们想要的操作而不跳转到action所指定的url,如下:
<form action="myurl" onSubmit="fun1();return false;">
执行fun1后不会跳转,方便表单操作
3.使用onkeydown事件,如下:
<input type="text" onkeydown="if(event.keyCode==13){fun1();}"/>
这样在文本输入框内输入文字后直接敲击回车,也会执行fun1函数
有个疑问问下大家,onkeydown事件能为form或者div这样的元素注册吗,比如说
<div onkeydown=" if(event.keyCode==13){fun1();} "></div>
就是希望在焦点在div层的任何一个地方的时候,敲击回车活也执行fun1,而不是非要焦点在文本输入框的时候敲击回车才去执行fun1,那位清楚的探讨下,我试了下貌似不行
如何让form表单在enter键入时不提交的更多相关文章
- form表单按enter键自动提交的问题
废话不多说.直接上代码. 1:form表单按enter键自动提交的情况 <!doctype html> <html lang="en"> <head& ...
- form表单的enter自动提交
当form中只有一个文本框时并且获得焦点 按enter时,就会自动提交表单.阻止自动提交 可以添加一个隐藏的input框 <input type="text" style=& ...
- form表单回车Enter不直接提交,类似tab切换
<input> 控件增加onkeypress事件 onkeypress="return handleEnter(this, event)" JS如下: var keyC ...
- 【jQuery】将form表单通过ajax实现无刷新提交
//将form转换为AJAX提交 function ajaxSubmit(url,frm,fn){ var dataPara=getFormJson(frm); $.ajax({ url:url, t ...
- html form表单追加input元素后在提交
form.append(input); //input为对象 (设置name和val有效) $("#form1").submit();//提交事件
- form表单 ----在路上(15)
form 表单就是将用户的信息提交到服务器,服务器会将信息存储活着根据信息查询数据进行增删改查,再将其返回给用户. 基本格式: <form action="" method ...
- form表单取消按钮自动提交
默认写在form表单里的按钮可以自动提交表单,现在要实现的效果是点击button按钮调用js函数,再有ajax提交 <button type="button" class=& ...
- js阻止form表单重复提交
防止表单重复提交的方法总体来说有两种,一种是在js中阻止重复提交:另一种是在后台利用token令牌实现,大致思路是生成一个随机码放到session和form表单的隐藏输入框中,提交表单时两者对比,表单 ...
- 项目回顾1-图片上传-form表单还是base64-前端图片压缩
第一个项目终于上线了,是一个叫亲青筹的公益众筹平台,微信端,电脑端还有后台界面大部分都是我完成的,几个月过来,感觉收获了很多,觉得要总结一下. 首先想到的是图片上传的问题.在通常表单数据都是ajax上 ...
随机推荐
- 【WPF】拖拽ListBox中的Item
整理了两个关于WPF拖拽ListBox中的Item的功能.项目地址 https://github.com/Guxin233/WPF-DragItemInListBox 需求一: 两个ListBox,拖 ...
- linux 重定向 标准错误与标准输出到同一文件
Linux Shell 环境中的输入输出重定向,用符号<和>来表示.0.1和2分别表示标准输入.标准输出和标准错误. 1.重定向标准输出到文件: cat foo > foo.txt ...
- android:screenOrientation的说明
在Android的官方文档当中,对android:screenOrientation的说明如下: http://www.cnblogs.com/snowberg/archive/2012/07/15/ ...
- hive中窗口分析函数
分组统计 1. groups sets(field1,field2,field3, (field1,field2)) 样例如下: select dt,tenantCode,nvl(platform,' ...
- 移动端报表JS开发演示样例
近期对移动端的报表开发颇有研究,细磨精算了好久,尽管到如今还是"囊中羞涩",但决定还是先抛砖引玉,拿点小干货出来和大家分享. 研究的工具是比較有代表性的FineReport. 1. ...
- SpringBoot2 集成三种连接池 c3p0 hikari druid
Hikari 1.首先集成 hikari springboot默认集成,只需要简单的配置即可 1.1 首先导入包 <dependency> <groupId>com.zaxxe ...
- 快速排序算法(Quicksort)
快速排序算法是对集合中元素进行排序最通用的算法,俗称快排,其算法的时间复杂度为O(nlgn),空间复杂度为O(1). 我们举例来对其算法思路进行理解,譬如数组 A = { 4, 8, 1, 2, 9, ...
- 微信小程序——倒计时功能
做小程序项目中,需要做一个倒计时功能,如下图: 记录一下实现步骤: 1.考虑到这个功能可能会有多处用到,所以把倒计时的函数写在utils.js里面: const formatNumber = n =& ...
- 关于jquery版本冲突问题
今天做项目时,碰到一个问题,纠结了好几个小时.我需要引入jquery-1.9.1.js来满足我引入的别的js文件,但同时,我也需要引入jquery.js,这个是必须要引入的.而这两个不能只引入一个,同 ...
- (笔记)Mysql命令use:使用数据库
use命令可以让我们来使用数据库. use命令格式: use <数据库名>; 例如,如果xhkdb数据库存在,尝试存取它: mysql> use xhkdb;屏幕提示:Datab ...