用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 相关文章推荐
JS类的封装及实现代码
Dec 02 Javascript
jquery png 透明解决方案(推荐)
Aug 21 Javascript
jquery $.ajax相关用法分享
Mar 16 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 Javascript
javascript中的3种继承实现方法
Jan 27 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
vue3.0 CLI - 2.4 - 新组件 Forms.vue 中学习表单
Sep 14 Javascript
深入浅出了解Node.js Streams
May 27 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 Javascript
Vue实现图书管理案例
Jan 20 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
php 文本文件的读取效率
2012/02/10 PHP
PHP中创建图像并绘制文字的例子
2014/11/19 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
Yii清理缓存的方法
2016/01/06 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
php获取小程序码的实现代码(B类接口)
2020/06/13 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
JavaScript基本对象
2007/01/11 Javascript
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
Javascript学习笔记2 函数
2010/01/11 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
2018/01/31 Javascript
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
Python在线运行代码助手
2016/07/15 Python
使用Python对Excel进行读写操作
2017/03/30 Python
Python 实现微信防撤回功能
2019/04/29 Python
Python中遍历列表的方法总结
2019/06/27 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
Python爬取数据并实现可视化代码解析
2020/08/12 Python
基于Python正确读取资源文件
2020/09/14 Python
python Paramiko使用示例
2020/09/21 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
求职推荐信范文
2013/12/01 职场文书
毕业生自荐书
2014/02/03 职场文书
交通安全责任书范本
2014/07/24 职场文书
财产分割协议书范本
2014/11/03 职场文书
店铺转让协议书
2014/12/02 职场文书
公务员年度个人总结
2015/02/12 职场文书
PostgreSQL出现死锁该如何解决
2022/05/30 PostgreSQL