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 相关文章推荐
MSN消息提示类
Sep 05 Javascript
早该知道的7个JavaScript技巧
Mar 27 Javascript
js读取配置文件自写
Feb 11 Javascript
使用jQuery动态加载js脚本文件的方法
Apr 03 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
confirm确认对话框的实现方法总结
Jun 17 Javascript
详解JavaScript中数组的reduce方法
Dec 02 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 Javascript
Chrome调试折腾记之JS断点调试技巧
Sep 11 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 Javascript
详解JWT token心得与使用实例
Aug 02 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 Squid中可缓存的动态网页设计
2008/09/17 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
PHP支付宝当面付2.0代码
2018/12/21 PHP
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
javascript全局变量封装模块实现代码
2012/11/28 Javascript
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
jQuery中triggerHandler()方法用法实例
2015/01/19 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
javascript自动切换焦点控制效果完整实例
2016/02/02 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[44:37]完美世界DOTA2联赛PWL S3 Forest vs access 第一场 12.11
2020/12/13 DOTA
Python三元运算实现方法
2015/01/12 Python
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
JBL英国官网:JBL UK
2018/07/04 全球购物
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
环境工程专业个人求职信
2013/12/05 职场文书
装修致歉信
2014/01/15 职场文书
《寓言两则》教学反思
2014/02/27 职场文书
预备党员承诺书
2014/03/25 职场文书
求职信标题怎么写
2014/05/26 职场文书