用JS控制回车事件的代码
更新时间：2011年02月20日 23:19:12 作者：
在写代码的时候偶尔会碰到被回车按钮所纠结的时候，例如上周客户反应我们的产品在页面按回车后，总是自动登出，而不是提交数据，客户对此也是意见很大。
我们操作习惯也确实是喜欢用回车建来直接提交数据。经过对项目的一番检查，这其实是页面设计得不好，导致浏览器在加载时把退出登录按钮当成默认的按钮，所以一按回车就触这退出按钮事件。考虑到一个庞大的项目为了这个问题去改页面设计也不太现实，况且客户要求在有“保存”按钮时按回车按钮就触发“保存”按钮事件，有“下一步”按钮时就触发它的事件，有“提交”按钮时就触发相应的事件等等，如果一个个页面去改动那工作量可就大得惊人了。于是乎考虑用直接在模板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的按钮时，会导致触发所有按钮，至于如何改进就看实际应用场景了，而在我的项目中是不会出现同时存在这几个按钮，所以可以平安应用。
复制代码 代码如下:
<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 中基本数据类型（Primitive Types)和引用类型（Reference Types)的区别。2015-05-05
你必须知道的Javascript知识点之"单线程事件驱动"的使用
本篇文章小编为大家介绍，你必须知道的Javascript知识点之"单线程事件驱动"的使用。需要的朋友参考下2013-04-04
Javascript与vbscript数据共享...2007-01-01
深入理解JavaScript中的call、apply、bind方法的区别
下面小编就为大家带来一篇深入理解JavaScript中的call、apply、bind方法的区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
用js怎么把&字符换成"&:"...2006-10-10
在现代Web应用程序中,日期选择器是一个非常常见的组件,用户可以使用它来选择特定的日期,在本篇文章中,我们将使用JavaScript和HTML来创建一个简单但功能强大的日期选择插件,这个日期选择插件是比较考验Js基本功的,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了Javascript promise异步编程，Promise 是异步编程的一种解决方案，可以替代传统的解决方案–回调函数和事件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-04-04
最好用的Bootstrap fileinput.js文件上传组件
这篇文章主要为大家详细介绍了最好用的Bootstrap fileinput.js文件上传组件的使用方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
在JavaScript中数组也是比较常用的对象之一，数组是值的有序集合，本篇文章给大家分享Javascript中Array()数组函数详解，需要的朋友可以参考下2015-08-08
这篇文章主要为大家详细介绍了微信小程序实现卡片层叠滑动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
最新评论