用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 detach()后节点中的某个值实现代码
Feb 05 Javascript
js异常捕获方法介绍
Apr 10 Javascript
优化javascript的执行效率一些方法总结
Dec 25 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
Sep 04 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
Oct 05 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
Dec 23 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
jquery实现轮播图效果
Feb 13 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 Javascript
React 父子组件通信的实现方法
Dec 05 Javascript
ES6使用 Array.includes 处理多重条件用法实例分析
Mar 02 Javascript
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上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
Laravel框架表单验证详解
2014/09/04 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
很可爱的输入框
2008/08/03 Javascript
javascript 读取图片文件的大小
2009/06/25 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
2017/06/13 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
Angular2 组件间通过@Input @Output通讯示例
2017/08/24 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
让python 3支持mysqldb的解决方法
2017/02/14 Python
django之session与分页(实例讲解)
2017/11/13 Python
Python机器学习算法之k均值聚类(k-means)
2018/02/23 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
Django中信号signals的简单使用方法
2019/07/04 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
python环境下安装opencv库的方法
2020/03/05 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
python raise的基本使用
2020/09/10 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
canvas小画板之平滑曲线的实现
2020/08/12 HTML / CSS
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
如何唤起类中的一个方法
2013/11/29 面试题
人事专员职责
2014/02/22 职场文书
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
个人落户申请书怎么写?
2019/06/28 职场文书
python处理json数据文件
2022/04/11 Python
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js