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 相关文章推荐
JavaScript 比较时间大小的代码
Apr 24 Javascript
解决jQuery插件tipswindown与hintbox冲突
Nov 05 Javascript
jQuery 选择器项目实例分析及实现代码
Dec 28 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
jQuery源码分析之Callbacks详解
Mar 13 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
Dec 20 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
JavaScript实现字符串与HTML格式相互转换
Mar 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
zend framework配置操作数据库实例分析
2012/12/06 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
php多线程实现方法及用法实例详解
2015/10/26 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
2012/12/17 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
jQuery实现的一个自定义Placeholder属性插件
2014/08/11 Javascript
jQuery中closest()函数用法实例
2015/01/07 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
vue bootstrap小例子一枚
2017/06/09 Javascript
纯js实现画一棵树的示例
2017/09/05 Javascript
Router解决跨模块下的页面跳转示例
2018/01/11 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
回顾Javascript React基础
2019/06/15 Javascript
讲解Python中的递归函数
2015/04/27 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
Python使用回溯法子集树模板解决迷宫问题示例
2017/09/01 Python
python实现k-means聚类算法
2018/02/23 Python
解析python 中/ 和 % 和 //(地板除)
2020/06/28 Python
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
SEPHORA丝芙兰捷克官网:购买香水、化妆品和护肤品
2018/11/26 全球购物
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
下面这个程序执行后会有什么错误或者效果
2014/11/03 面试题
幼儿园教师培训制度
2014/01/16 职场文书
委托书范本
2014/04/02 职场文书
学校花圃的标语
2014/06/18 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
新年寄语2016
2015/08/17 职场文书
postgresql中如何执行sql文件
2023/05/08 PostgreSQL