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 相关文章推荐
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
基于jquery的手风琴图片展示效果实现方法
Dec 16 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
vue.js简单配置axios的方法详解
Dec 13 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
详解使用jest对vue项目进行单元测试
Sep 07 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 Javascript
聊聊JS ES6中的解构
Apr 29 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
收音机指标测试方法及仪器
2021/03/01 无线电
全新的PDO数据库操作类php版(仅适用Mysql)
2012/07/22 PHP
php登陆页的密码处理方式分享
2013/10/14 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
关于js new Date() 出现NaN 的分析
2012/10/23 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
JS实现表格数据各种搜索功能的方法
2015/03/03 Javascript
jQuery获取URL请求参数的方法
2015/07/18 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
input框中的name和id的区别
2016/11/16 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
对称加密与非对称加密优缺点详解
2017/02/06 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
python 中的列表解析和生成表达式
2011/03/10 Python
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
Python中文件的读取和写入操作
2018/04/27 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
opencv python 基于KNN的手写体识别的实例
2018/08/03 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
Python中使用threading.Event协调线程的运行详解
2020/05/02 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
文员的职业生涯规划发展方向
2014/02/08 职场文书
银行贷款收入证明
2014/10/17 职场文书
房产电话营销开场白
2015/05/29 职场文书
新农村建设指导员工作总结
2015/08/13 职场文书
MySQL创建管理HASH分区
2022/04/13 MySQL