用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 相关文章推荐
深入认识JavaScript中的函数
Jan 22 Javascript
JAVASCRIPT HashTable
Jan 22 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 Javascript
Js-$.extend扩展方法使方法参数更灵活
Jan 15 Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 Javascript
JavaScript中window.open用法实例详解
Apr 15 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 Javascript
webpack-dev-server自动更新页面方法
Feb 22 Javascript
JavaScript修改注册表实例代码
Jan 05 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计算给定时间之前的函数用法实例
2015/04/03 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
jquery easyui datagrid实现增加,修改,删除方法总结
2016/05/25 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
jquery实现动态添加附件功能
2018/10/23 jQuery
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
Python字典对象实现原理详解
2019/07/01 Python
python3.6编写的单元测试示例
2019/08/17 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
优秀员工自荐信范文
2013/10/05 职场文书
3D空间设计学生找工作的自我评价
2013/10/28 职场文书
元宵晚会主持词
2014/03/25 职场文书
小城镇建设汇报材料
2014/08/16 职场文书
党性心得体会
2014/09/03 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
领导工作表现评语
2015/01/04 职场文书
采购员岗位职责
2015/02/03 职场文书
召开会议通知范文
2015/04/15 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL
Java使用jmeter进行压力测试
2021/07/09 Java/Android