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 相关文章推荐
js 立即调用的函数表达式如何写
Jan 12 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
JS中判断某个字符串是否包含另一个字符串的五种方法
May 03 Javascript
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
Vue 实现手动刷新组件的方法
Feb 19 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 Javascript
Vue如何获取数据列表展示
Dec 11 Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 Javascript
JavaScript this关键字的深入详解
Jan 14 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+XML 制作简单的留言本 图文教程
2009/11/02 PHP
php可应用于面包屑导航的迭代寻找家谱树实现方法
2015/02/02 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
jquery中交替点击事件toggle方法的使用示例
2013/12/08 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
2016/05/09 Javascript
深入理解JS函数的参数(arguments)的使用
2016/05/28 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
vue2中filter()的实现代码
2017/07/09 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
使用layer弹窗,制作编辑User信息页面的方法
2019/09/27 Javascript
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
python查找第k小元素代码分享
2013/12/18 Python
python pdb调试方法分享
2014/01/21 Python
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
如何在windows下安装配置python工具Ulipad
2020/10/27 Python
CSS3 3D制作实战案例分析
2016/09/18 HTML / CSS
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
我的大学生活演讲稿
2014/04/25 职场文书
高中语文课后反思
2014/04/27 职场文书
十佳护士先进事迹
2014/05/08 职场文书
英语教育专业自荐信
2014/05/29 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
2015年小学开学寄语
2015/02/27 职场文书
合作与交流自我评价
2015/03/09 职场文书
降价通知函
2015/04/23 职场文书