用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切换功能的简单方法
Nov 23 Javascript
javascript数据结构之二叉搜索树实现方法
Nov 25 Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 Javascript
jQuery Select下拉框操作小结(推荐)
Jul 22 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
Nov 15 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 Javascript
JavaScript遍历数组的方法代码实例
Jan 14 Javascript
2019最新21个MySQL高频面试题介绍
Feb 06 Javascript
原生JavaScript实现幻灯片效果
Feb 19 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 表单提交给自己
2008/07/24 PHP
PHP 面向对象程序设计(oop)学习笔记(一) - 抽象类、对象接口、instanceof 和契约式编程
2014/06/12 PHP
php中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
PHP中的switch语句的用法实例详解
2015/10/21 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
PHP设计模式之单例模式定义与用法分析
2019/03/26 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
JavaScript类属性的访问方式详解
2014/02/11 Javascript
深入理解JavaScript中的call、apply、bind方法的区别
2016/05/30 Javascript
JavaScript ES5标准中新增的Array方法
2016/06/28 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
基于vue2.0+vuex的日期选择组件功能实现
2017/03/13 Javascript
使用JS获取SessionStorage的值
2018/01/12 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
对vue中methods互相调用的方法详解
2018/08/30 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
Paypal支付不完全指北
2020/06/04 Javascript
js canvas实现五子棋小游戏
2021/01/22 Javascript
python爬取51job中hr的邮箱
2016/05/14 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
应届大学生求职信
2013/12/01 职场文书
运动会稿件50字
2014/02/17 职场文书
大学生村官承诺书
2014/03/28 职场文书
大学社团活动总结
2014/04/26 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
2014年销售部工作总结
2014/12/01 职场文书
公务员学习中国梦心得体会
2016/01/05 职场文书