文本框中,回车键触发事件的js代码[多浏览器兼容]


Posted in Javascript onJune 07, 2010

判断是否按下的为回车非常简单:

function EnterPress(){ 
if(event.keyCode == 13){ 
... 
} 
}

IE6的onkeypress会接受"回车事件",而onkeydown不会接受
IE8的onkeypress不会接受"回车事件",而onkeydown会接受
...不用纠结于此,两个都写上吧
<input type="text" onkeypress="EnterPress()" onkeydown="EnterPress()" />

但是,到了FF下面,又会出现矛盾.FF是onkeypress和onkeydown都接受"回车事件"的.
同时,为了兼容FF下面能获得event,需要这样写:
function EnterPress(e){ //传入 event 
var e = e || window.event; 
if(e.keyCode == 13){ 
... 
} 
}

那么,只要给任意的一个事件内传参数 event,另外一个不传参数,即可以让FF只执行一次了:
&<input type="text" onkeypress="EnterPress(event)" onkeydown="EnterPress()" />

综上,兼容IE和FF:
<head> 
<script> 
function EnterPress(e){ //传入 event 
var e = e || window.event; 
if(e.keyCode == 13){ 
document.getElementById("txtAdd").focus(); 
} 
} 
</script> 
</head> 
<body> 
<input type="text" id="txtName" onkeypress="EnterPress(event)" onkeydown="EnterPress()" /> 
<input type="text" id="txtAdd" /> 
</body>

--by:泡沫的幻想
Javascript 相关文章推荐
动态加载js文件 document.createElement
Oct 14 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
May 19 Javascript
jquery二级导航内容均分的原理及实现
Aug 13 Javascript
js实现弹窗插件功能实例代码分享
Dec 12 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
Mar 25 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
webpack打包js的方法
Mar 12 Javascript
详解js访问对象的属性和方法
Oct 25 Javascript
详解小程序设置缓存并且不覆盖原有数据
Apr 15 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 Javascript
解决ant Design中Select设置initialValue时的大坑
Oct 29 Javascript
javascript下数值型比较难点说明
Jun 07 #Javascript
jQuery源码分析之Event事件分析
Jun 07 #Javascript
jQueryUI的Dialog的简单封装
Jun 07 #Javascript
jquery 的 $(&quot;#id&quot;).html() 无内容的解决方法
Jun 07 #Javascript
基于jquery+thickbox仿校内登录注册框
Jun 07 #Javascript
jquery 注意事项与常用语法小结
Jun 07 #Javascript
php上传图片并给图片打上透明水印的代码
Jun 07 #Javascript
You might like
php HandlerSocket的使用
2011/05/02 PHP
PHP实现ftp上传文件示例
2014/08/21 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
封装的原生javascript弹出层代码
2010/09/24 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
JavaScript中的原型和继承详解(图文)
2014/07/18 Javascript
jQuery链使用指南
2015/01/20 Javascript
javascript 闭包详解
2015/02/15 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
jQuery时间日期三级联动(推荐)
2016/11/27 Javascript
手把手教你把nodejs部署到linux上跑出hello world
2017/06/19 NodeJs
Bootstrap Table从零开始
2017/06/30 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
Vue页面骨架屏注入方法
2018/05/13 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
2019/06/14 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
Vue实现简单计算器案例
2020/02/25 Javascript
Python httplib,smtplib使用方法
2008/09/06 Python
在Django的form中使用CSS进行设计的方法
2015/07/18 Python
Python随手笔记之标准类型内建函数
2015/12/02 Python
基于Python数据可视化利器Matplotlib,绘图入门篇,Pyplot详解
2017/10/13 Python
使用python生成目录树
2018/03/29 Python
python pandas 组内排序、单组排序、标号的实例
2018/04/12 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
python3实现多线程聊天室
2018/12/12 Python
python opencv调用笔记本摄像头
2019/08/28 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
Python continue语句实例用法
2020/02/06 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
学雷锋标兵事迹材料
2014/08/18 职场文书
教师三严三实心得体会
2014/10/11 职场文书
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript
第四次工业革命,打工人与机器人的竞争
2022/04/21 数码科技