用JS控制回车事件的代码


Posted in Javascript onFebruary 20, 2011

我们操作习惯也确实是喜欢用回车建来直接提交数据。经过对项目的一番检查,这其实是页面设计得不好,导致浏览器在加载时把退出登录按钮当成默认的按钮,所以一按回车就触这退出按钮事件。考虑到一个庞大的项目为了这个问题去改页面设计也不太现实,况且客户要求在有“保存”按钮时按回车按钮就触发“保存”按钮事件,有“下一步”按钮时就触发它的事件,有“提交”按钮时就触发相应的事件等等,如果一个个页面去改动那工作量可就大得惊人了。于是乎考虑用直接在模板header文件中用js来实现全站对回车按钮的事件触发,下面是相应的代码:

<script language="javascript" for="document" event="onkeydown"> 
//回车按钮事件处理 
if (event.keyCode == 13){ 
event.keyCode=0; 
var list=document.getElementsByTagName("input"); 
for(var i=0;i<list.length && list[i];i++) 
{ 
if(list[i].id.indexOf("IBtnNextStep")>0){//ID中包含有“IBtnNextStep”字眼的按钮 
list[i].click(); 
} 
if(list[i].id=="BtnSave"){ 
list[i].click(); 
} if(list[i].id=="BtnSumbit"){ 
list[i].click(); 
} 
} 
return false; 
} 
</script>

其实也蛮简单的,就在模板文件中加入上面那段,先获取回车事件,然后就获取页面的所有按钮,一个个循环判断按钮ID是否符合你要求,是的就去触发按钮的事件。上面代码还存在一个问题就是当你页面中同时存在了那几个ID的按钮时,会导致触发所有按钮,至于如何改进就看实际应用场景了,而在我的项目中是不会出现同时存在这几个按钮,所以可以平安应用。
Javascript 相关文章推荐
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
利用javascript判断文件是否存在
Dec 31 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
javascript 数组的正态分布排序的问题
Jul 31 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
Jan 04 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
解决Vue项目中tff报错的问题
Oct 21 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
apycom出品的jQuery精美菜单破解方法
Feb 18 #Javascript
自制基于jQuery的智能提示插件一枚
Feb 18 #Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
Feb 18 #Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 #Javascript
基于jquery的复制网页内容到WORD的实现代码
Feb 16 #Javascript
Jquery之美中不足小结
Feb 16 #Javascript
jquery的index方法实现tab效果
Feb 16 #Javascript
You might like
优化使用mysql存储session的php代码
2008/01/10 PHP
创建配置文件 用PHP写出自己的BLOG系统 2
2010/04/12 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
PHP多进程编程实例详解
2017/07/19 PHP
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
vue实现自定义多选与单选的答题功能
2018/07/05 Javascript
Vue绑定内联样式问题
2018/10/17 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
[01:46]新英雄登场
2019/09/10 DOTA
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
Python操作Word批量生成文章的方法
2015/07/28 Python
python框架django基础指南
2016/09/08 Python
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
python实现ftp文件传输功能
2020/03/20 Python
Python爬虫教程知识点总结
2020/10/19 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
大学生创业计划书的用途
2014/01/08 职场文书
初三政治教学反思
2014/01/30 职场文书
统计岗位职责
2014/02/21 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
疾病捐款倡议书
2014/05/13 职场文书
cf战队收人口号
2014/06/21 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
学术会议领导致辞
2015/07/29 职场文书
爱护环境建议书
2015/09/14 职场文书
六年级上册《闻官军收河南河北》的教学设计
2019/11/15 职场文书
MySQL三种方式实现递归查询
2022/04/18 MySQL