javascript 按回车键相应按钮提交事件


Posted in Javascript onNovember 02, 2009

1、使用提交按钮提交,在form表单中的onsubmit事件进行表单验证:

<script type="text/javascript"> function onSub(){ 
//表单验证代码 
} 
</script> 
<form action="" method="" onsubmit="javascript:onSub();">

2、使用button或图片的onclick事件调用表单验证代码:
<input type="button" name="button" id="button" onclick="javascript:onSub();" /> <img src="图片路径" onclick="javascript:onSub();" />

但是,使用第二种方式进行提交表单时,不能在填写完表单时,按回车不能提交表单。这给客户的

感受是和直接使用提交按钮提交表单是不同的;为了实现此项功能只需在你的页面加上如下javascript代码即可

function butOnClick() { 
if (event.keyCode == 13) { 
var button = document.getElementById("bsubmit"); //bsubmit 为botton按钮的id 
button.click(); 
return false; 
} 
}

在你表单最有一个输入项中出发onkeydown事件调用butOnClick()函数即可;例如:登陆程序的最后一项是密码,则

<input type="password" name="userPwd" onkeydown="javascript:butOnClick();" />

这样当你输入完密码后,按下回车键即可实现表单验证和登录操作(如果用户名和密码正确)。这是个人的一点总结,共享出来

大家齐分享!

Javascript 相关文章推荐
js修改table中Td的值(定义td的单击事件)
Jan 10 Javascript
JS实现程序暂停与继续功能代码解读
Oct 10 Javascript
使用Raygun来自动追踪AngularJS中的异常
Jun 23 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
May 17 Javascript
js无提示关闭浏览器窗口的两种方法分析
Nov 06 Javascript
微信小程序 loading 详解及实例代码
Nov 09 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
Jun 21 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
Apr 21 Javascript
JavaScript如何判断对象有某属性
Jul 03 Javascript
js+css3实现炫酷时钟
Aug 18 Javascript
JQuery 解析多维的Json数据格式
Nov 02 #Javascript
javascript(jquery)利用函数修改全局变量的代码
Nov 02 #Javascript
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 #Javascript
JS OOP包机制,类创建的方法定义
Nov 02 #Javascript
JQuery 网站换肤功能实现代码
Nov 02 #Javascript
Javascript结合css实现网页换肤功能
Nov 02 #Javascript
cnblogs csdn 代码运行框实现代码
Nov 02 #Javascript
You might like
非洲第一个咖啡超凡杯大赛承办国—卢旺达的咖啡怎么样
2021/03/03 咖啡文化
请离开include_once和require_once
2013/07/18 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
php递归创建目录的方法
2015/02/02 PHP
php遍历类中包含的所有元素的方法
2015/05/12 PHP
PHP函数import_request_variables()用法分析
2016/04/02 PHP
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
一句话JavaScript表单验证代码
2009/08/02 Javascript
js DOM模型操作
2009/12/28 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
2011/05/12 Javascript
JavaScript内核之基本概念
2011/10/21 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
2016/08/15 Javascript
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
js canvas实现5张图片合成一张图片
2019/07/15 Javascript
[45:52]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第二场 12.09
2020/12/12 DOTA
python使用正则表达式替换匹配成功的组
2017/11/17 Python
python对文件目录的操作方法实例总结
2019/06/24 Python
通过自学python能找到工作吗
2020/06/21 Python
python如何构建mock接口服务
2021/01/28 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
白色公司:The White Company
2017/10/11 全球购物
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
毕业生教师求职信
2013/10/20 职场文书
《春雨》教学反思
2014/04/24 职场文书
公司应聘求职信
2014/06/21 职场文书
上班迟到检讨书
2014/09/15 职场文书
解决jupyter notebook图片显示模糊和保存清晰图片的操作
2021/04/24 Python
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
Win11快速关闭所有广告推荐
2022/04/19 数码科技