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 相关文章推荐
window.opener用法和用途实例介绍
Aug 19 Javascript
js history对象简单实现返回和前进
Oct 30 Javascript
JavaScript返回0-1之间随机数的方法
Apr 06 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
js如何判断输入字符串长度
Dec 16 Javascript
Vue.js常用指令汇总(v-if、v-for等)
Nov 03 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
Vue仿支付宝支付功能
May 25 Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 Javascript
ES2020 已定稿,真实场景案例分析
May 25 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
php2html php生成静态页函数
2008/12/08 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
php DES加密算法实例分析
2019/09/18 PHP
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
javascript中通过arguments参数伪装方法重载
2014/10/08 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
axios发送post请求,提交图片类型表单数据方法
2018/03/16 Javascript
vue1.0和vue2.0的watch监听事件写法详解
2018/09/11 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
python进程类subprocess的一些操作方法例子
2014/11/22 Python
Python导入txt数据到mysql的方法
2015/04/08 Python
浅谈Python中列表生成式和生成器的区别
2015/08/03 Python
python中import学习备忘笔记
2017/01/24 Python
Python常见异常分类与处理方法
2017/06/04 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
django中使用事务及接入支付宝支付功能
2019/09/15 Python
pygame实现飞机大战
2020/03/11 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
软件测试题目
2013/02/27 面试题
会计实习生工作总结的自我评价
2013/10/07 职场文书
英文留学推荐信范文
2014/01/25 职场文书
餐饮采购员岗位职责
2014/03/15 职场文书
初中学习计划书范文
2014/09/15 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
海底两万里读书笔记
2015/06/26 职场文书
办公室日常管理制度
2015/08/04 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript
python+opencv实现目标跟踪过程
2022/06/21 Python