JS onkeypress兼容性写法详解


Posted in Javascript onApril 27, 2016

要求实现输入密码后按回车,触发后台事件。看似十分简单的需求,可是却碰到不少难题啊。

HTML内容中主要有一个密码输入文本框,还有一个按钮,用来触发后台事件。

1. TextBox文本框获得焦点后直接回车,页面会刷新。
   经过代码仔细研究,原来是当页面中只有一个文本框控件时,当按回车健页面将刷新。
   处理方法:在页面中加入一个隐藏的TextBox控件。
   具体原理不明!

2. 用Jquery实现方法:

$(document).ready(function(){
  $("#tbPassword").focus();
  $('#bPassword').keydown(function(e){     
    if(e.keyCode == 13){ 
      $("#ctl00_ContentBody_btnAccept_linkButton")[0].click();
    }    
  });
  });

3. 因为种种原因不能采用Jquery的实现方法,只好改用JS,它的兼容性就是一个最头疼的问题了。

document.getElementByIdx_x_x("tbPassword").onkeypress = function(event){
    var keynum;
    if(window.event) // IE
    {
     keynum = window.event.keyCode;
    }
    else if(event.which) // Netscape/Firefox/Opera
    {
     keynum = event.which;
    }
    
    if (keynum == 13)
      document.getElementByIdx_x_x('ctl00_ContentBody_btnAccept_linkButton').click();
  }

说明:

在IE下读取键盘按键:

keynum = event.keyCode; // 字母d,keynum=100
    keychar = String.fromCharCode(keynum); // 将keynum转换成字符d

在FireFox中读取键盘按键:   

keynum = event.which; // 字母d,keynum=100
    keychar = String.fromCharCode(keynum); // 将keynum转换成字符d

如IE中,只有keyCode属性,而FireFox中有which和charCode属性,Opera中有keyCode和which属性等。

因此,在Jquery中已经解决这种兼容性问题。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JavaScript 滚轮事件使用说明
Mar 07 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
JavaScript实现点击单元格改变背景色的方法
Feb 12 Javascript
AngularJS内建服务$location及其功能详解
Jul 01 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
js微信分享实现代码
Oct 11 Javascript
React如何避免重渲染
Apr 10 Javascript
详解JS中统计函数执行次数与执行时间
Sep 04 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
Sep 23 Javascript
Vue3.x源码调试的实现方法
Oct 13 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
Jun 05 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 Javascript
使用vue.js开发时一些注意事项
Apr 27 #Javascript
原生js实现addClass,removeClass,hasClass方法
Apr 27 #Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 #Javascript
常用原生JS兼容性写法汇总
Apr 27 #Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 #Javascript
跨域资源共享 CORS 详解
Apr 26 #Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 #Javascript
You might like
用php制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
PHP 的Opcache加速的使用方法
2017/12/29 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
jQuery 1.0.2
2006/10/11 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
12种JavaScript常用的MVC框架比较分析
2015/11/16 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
JSON创建键值对(key是中文或者数字)方式详解
2017/08/24 Javascript
vue学习笔记之v-if和v-show的区别
2017/09/20 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
python处理圆角图片、圆形图片的例子
2014/04/25 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
python如何实现数据的线性拟合
2019/07/19 Python
解决matplotlib.pyplot在Jupyter notebook中不显示图像问题
2020/04/22 Python
Python利用Xpath选择器爬取京东网商品信息
2020/06/01 Python
计算机科学系职业生涯规划书
2014/03/08 职场文书
高中英语演讲稿范文
2014/04/24 职场文书
优秀家长事迹材料
2014/05/17 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
党员先进事迹材料
2014/12/19 职场文书
2015年中秋节活动总结
2015/03/23 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server
解决tk mapper 通用mapper的bug问题
2021/06/16 Java/Android
PyMongo 查询数据的实现
2021/06/28 Python
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis