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通过相同的name进行表格求和代码
Aug 18 Javascript
javascript if条件判断方法小结
May 17 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
JavaScript与ActionScript3两者的同性与差异性
Sep 22 Javascript
纯jQuery实现前端分页功能
Mar 23 jQuery
vue中实现methods一个方法调用另外一个方法
Feb 08 Javascript
vue 实现剪裁图片并上传服务器功能
Mar 01 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
vue从一个页面跳转到另一个页面并携带参数的解决方法
Aug 12 Javascript
JavaScript基础之this和箭头函数详析
Sep 05 Javascript
原生js中运算符及流程控制示例详解
Jan 05 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
把从SQL中取出的数据转化成XMl格式
2006/10/09 PHP
递归删除一个节点以及该节点下的所有节点示例
2014/03/19 PHP
php中运用http调用的GET和POST方法示例
2014/09/29 PHP
php实现使用正则将文本中的网址转换成链接标签
2014/12/03 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
Aster vs KG BO3 第二场2.19
2021/03/10 DOTA
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
canvas实现绘制吃豆鱼效果
2017/01/12 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
Express之get,pos请求参数的获取
2017/05/02 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
[04:09]2014DOTA2国际邀请赛Ti西雅图 历届冠军相继出局 BBC综述今日比赛
2014/07/20 DOTA
机器学习python实战之手写数字识别
2017/11/01 Python
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
如何编写python的daemon程序
2021/01/07 Python
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
加拿大时尚床上用品零售商:QE Home | Quilts Etc
2018/01/22 全球购物
美国购买当代和现代家具网站:MODTEMPO
2018/07/20 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
如何启动时不需输入用户名与密码
2014/05/09 面试题
影视艺术学院毕业生自荐信
2013/11/13 职场文书
数学检讨书1000字
2014/02/24 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers