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批量控制form禁用的代码
Aug 06 Javascript
js数组转json并在后台对其解析具体实现
Nov 20 Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 Javascript
js实现表单多按钮提交action的处理方法
Oct 24 Javascript
简单分析javascript中的函数
Sep 10 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
详解如何在React组件“外”使用父组件的Props
Jan 12 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 Javascript
vue监听用户输入和点击功能
Sep 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
mysql5详细安装教程
2007/01/15 PHP
浅谈apache和nginx的rewrite的区别
2013/02/22 PHP
php+ajax制作无刷新留言板
2015/10/27 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
php经典趣味算法实例代码
2020/01/21 PHP
jquery tools 系列 scrollable学习
2009/09/06 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
jquery实现侧边弹出的垂直导航
2014/12/09 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
Javascript中的对象和原型(二)
2016/08/12 Javascript
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
Python 随机生成中文验证码的实例代码
2013/03/20 Python
详解Python中的from..import绝对导入语句
2016/06/21 Python
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
甜品店的创业计划书范文
2014/01/02 职场文书
大学生军训感想
2014/02/16 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
商场消防安全责任书
2014/07/29 职场文书
德育标兵事迹材料
2014/08/24 职场文书
秋季运动会演讲稿
2014/09/16 职场文书
大学生学期个人总结
2015/02/12 职场文书
详解Redis主从复制实践
2021/05/19 Redis
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript