用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 04 Javascript
form.submit()不能提交表单的原因分析
Oct 23 Javascript
jquery分隔Url的param方法(推荐)
May 25 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
canvas绘制万花筒效果(代码分享)
Jan 20 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
Jan 17 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
vue.js实现简单的计算器功能
Feb 22 Javascript
js实现查询商品案例
Jul 22 Javascript
js实现验证码功能
Jul 24 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之sprintf函数用法详解
2014/11/12 PHP
jQuery 解析xml文件
2009/08/09 Javascript
js前台判断开始时间是否小于结束时间
2012/02/23 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
关于angularJs指令的Scope(作用域)介绍
2016/10/25 Javascript
js常用的继承--组合式继承
2017/03/06 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
AngularJS 实现购物车全选反选功能
2017/10/24 Javascript
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
2019/06/04 Javascript
开发中常用的25个JavaScript单行代码(小结)
2019/06/28 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
关于vue 结合原生js 解决echarts resize问题
2020/07/26 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
极简的Python入门指引
2015/04/01 Python
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
Python Series从0开始索引的方法
2018/11/06 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
HTML5之消息通知的使用(Web Notification)
2018/10/30 HTML / CSS
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
质量工程师岗位职责
2013/11/16 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
2014两会优秀的心得体会范文
2014/03/17 职场文书
企业人事任命书
2014/06/05 职场文书
中秋节活动总结
2014/08/29 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
党的群众路线教育实践活动查摆剖析材料
2014/10/10 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
OpenCV-Python实现怀旧滤镜与连环画滤镜
2021/06/09 Python
Java spring单点登录系统
2021/09/04 Java/Android