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高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
Feb 27 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
Javascript使用post方法提交数据实例
Aug 03 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
Swiper自定义分页器使用详解
Dec 28 Javascript
JavaScript实现短暂提示框功能
Apr 04 Javascript
vue-router动态设置页面title的实例讲解
Aug 30 Javascript
JavaScript 判断iPhone X Series机型的方法
Jan 28 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 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/06/20 PHP
Chrome Web App开发小结
2014/09/04 PHP
php中session与cookie的比较
2015/01/27 PHP
php socket通信简单实现
2016/11/18 PHP
javascript开发中因空格引发的错误
2010/11/08 Javascript
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
2017/02/10 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
Python list与NumPy array 区分详解
2019/11/06 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
会展中心部门工作职责
2013/11/27 职场文书
研发工程师岗位职责
2014/04/28 职场文书
员工安全承诺书
2014/05/22 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
如何写好闭幕词
2019/04/02 职场文书
Mysql效率优化定位较低sql的两种方式
2021/05/26 MySQL
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers