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更优雅的兼容
Aug 12 Javascript
jquery Mobile入门—多页面切换示例学习
Jan 08 Javascript
DWZ刷新dialog解决方法
Mar 03 Javascript
JavaScript和CSS通过expression实现Table居中显示
Jun 28 Javascript
jQuery .tmpl() 用法示例介绍
Aug 21 Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
Sep 27 Javascript
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 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 MsSql server时遇到的中文编码问题
2009/06/11 PHP
PHP实现绘制3D扇形统计图及图片缩放实例
2014/10/01 PHP
PHP将Excel导入数据库及数据库数据导出至Excel的方法
2015/06/24 PHP
yii用户注册表单验证实例
2015/12/26 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
js style动态设置table高度
2014/10/21 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
js点击返回跳转到指定页面实现过程
2020/08/20 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
解决ionic和angular上拉加载的问题
2017/08/03 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
如何使用 vue-cli 创建模板项目
2020/11/19 Vue.js
[47:48]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第三局
2016/02/28 DOTA
深入理解Python中的*重复运算符
2017/10/28 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
pyqt5与matplotlib的完美结合实例
2019/06/21 Python
python RC4加密操作示例【测试可用】
2019/09/26 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
长青弘远的面试题
2012/06/09 面试题
2015年创先争优活动总结
2015/03/27 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript