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 相关文章推荐
用jscript实现列出安装的软件列表
Jun 18 Javascript
jQuery图片轮播的具体实现
Sep 11 Javascript
javascript验证只能输入数字和一个小数点示例
Oct 21 Javascript
jquery实现的网页自动播放声音
Apr 30 Javascript
Node.js实现简单聊天服务器
Jun 20 Javascript
jQuery中parents()方法用法实例
Jan 07 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
Oct 24 Javascript
理解javascript模块化
Mar 28 Javascript
jQuery判断是否存在滚动条的简单方法
Sep 17 Javascript
js 倒计时(高效率服务器时间同步)
Sep 12 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
JS this关键字在ajax中使用出现问题解决方案
Jul 17 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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
PHP 图片上传实现代码 带详细注释
2010/04/29 PHP
Yii入门教程之Yii安装及hello world
2014/11/25 PHP
PHP访问Google Search API的方法
2015/03/05 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
举例说明如何为JavaScript的方法参数设置默认值
2015/11/17 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
vue分类筛选filter方法简单实例
2017/03/30 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
[44:10]2018DOTA2亚洲邀请赛 4.5 淘汰赛 EG vs VP 第一场
2018/04/06 DOTA
python基础教程之数字处理(math)模块详解
2014/03/25 Python
python将MongoDB里的ObjectId转换为时间戳的方法
2015/03/13 Python
python与C互相调用的方法详解
2017/07/14 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
python3 enum模块的应用实例详解
2019/08/12 Python
Python如何实现强制数据类型转换
2019/11/22 Python
使用TensorBoard进行超参数优化的实现
2020/07/06 Python
Jupyter Notebook 远程访问配置详解
2021/01/11 Python
selenium+超级鹰实现模拟登录12306
2021/01/24 Python
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
祖国在我心中演讲稿400字
2014/05/04 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
护士求职简历自我评价
2015/03/10 职场文书
呐喊读书笔记
2015/06/30 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
Python实现生成bmp图像的方法
2021/06/13 Python
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript