用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 相关文章推荐
几个比较经典常用的jQuery小技巧
Mar 01 Javascript
JS target与currentTarget区别说明
Aug 28 Javascript
JS编程小常识很有用
Nov 26 Javascript
jquery的ajax跨域请求原理和示例
May 08 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 Javascript
JavaScript之underscore_动力节点Java学院整理
Jul 03 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
JS返回顶部实例代码
Aug 09 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
Vue的data、computed、watch源码浅谈
Apr 04 Javascript
jQuery实现朋友圈查看图片
Sep 11 jQuery
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
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
Laravel中的chunk组块结果集处理与注意问题
2018/08/15 PHP
网页右键ie不支持event.preventDefault和event.returnValue (需要加window)
2013/02/22 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
ES6数组的扩展详解
2017/04/25 Javascript
vue2 中如何实现动态表单增删改查实例
2017/06/09 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
使用JS判断页面是首次被加载还是刷新
2019/05/26 Javascript
vue项目从node8.x升级到12.x后的问题解决
2019/10/25 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
粗略分析Python中的内存泄漏
2015/04/23 Python
Python的math模块中的常用数学函数整理
2016/02/04 Python
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
Python 的类、继承和多态详解
2017/07/16 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
python实现在多维数组中挑选符合条件的全部元素
2019/11/26 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
包装类的功能、种类、常用方法
2012/01/27 面试题
村官工作鉴定评语
2014/01/27 职场文书
教师职位说明书
2014/07/29 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
交通事故委托书范本
2014/09/28 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
党小组推荐意见
2015/06/02 职场文书
民主生活会意见
2015/06/05 职场文书
Pytorch 如何实现常用正则化
2021/05/27 Python
使用python求解迷宫问题的三种实现方法
2022/03/17 Python
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android