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 相关文章推荐
JQuery中each()的使用方法说明
Aug 19 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
Dec 03 Javascript
jquery动态更换设置背景图的方法
Mar 25 Javascript
捕获和分析JavaScript Error的方法
Mar 25 Javascript
JavaScript动态添加style节点的方法
Jun 09 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
vue 的keep-alive缓存功能的实现
Mar 22 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 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 数组基础知识小结
2010/08/20 PHP
PHP实现的DES加密解密实例代码
2016/04/06 PHP
Yii2 RESTful中api的使用及开发实例详解
2016/07/06 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
jQuery统计指定子元素数量的方法
2015/03/17 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
js实现的奥运倒计时时钟效果代码
2015/12/09 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
2019/07/24 Javascript
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
python实现xlsx文件分析详解
2018/01/02 Python
python模块之paramiko实例代码
2018/01/31 Python
Python实现的连接mssql数据库操作示例
2018/08/17 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
Python 解析xml文件的示例
2020/09/29 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
python eventlet绿化和patch原理
2020/11/21 Python
方太官方网上商城:销售方太抽油烟机、燃气灶、消毒柜等
2017/01/17 全球购物
大学生村官心得体会范文
2014/01/04 职场文书
怎么写好自荐书
2014/03/02 职场文书
社保代办委托书怎么写
2014/10/06 职场文书
简单租房协议书
2014/10/21 职场文书
地球一小时活动总结
2015/02/27 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
运动会跳远广播稿
2015/08/19 职场文书
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA