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实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
判断ie的两种简单方法
Aug 12 Javascript
js获取系统的根路径实现介绍
Sep 08 Javascript
JavaScript中使用自然对数ln的方法
Jun 14 Javascript
JavaScript获取页面中超链接数量的方法
Nov 09 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
Mac下安装vue
Apr 11 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
在vue中使用Base64转码的案例
Aug 07 Javascript
如何手写一个简易的 Vuex
Oct 10 Javascript
JavaScript中isPrototypeOf函数
Nov 07 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应用程序来获取Web服务器的状态信息
2006/10/09 PHP
使用php实现快钱支付功能(涉及到接口)
2013/07/01 PHP
JavaScript 节点操作 以及DOMDocument属性和方法
2007/12/06 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
js图片处理示例代码
2014/05/12 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果
2015/09/18 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
JavaScript获取服务器时间的方法详解
2016/12/11 Javascript
js图片上传的封装代码
2017/08/01 Javascript
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
thinkjs微信中控之微信鉴权登陆的实现代码
2019/08/08 Javascript
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
Linux-ubuntu16.04 Python3.5配置OpenCV3.2的方法
2018/04/02 Python
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
python scipy卷积运算的实现方法
2019/09/16 Python
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
简述数组与指针的区别
2014/01/02 面试题
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
金融专业个人求职信范文
2013/11/28 职场文书
上级检查欢迎词
2014/01/18 职场文书
单位委托书范本
2014/04/04 职场文书
人民调解员先进事迹材料
2014/05/08 职场文书
会议通知
2015/04/15 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书