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 sudoku 数独智力游戏生成代码
Mar 27 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
Apr 16 Javascript
JavaScript调用后台的三种方法实例
Oct 17 Javascript
jQuery中siblings()方法用法实例
Jan 08 Javascript
jQuery的load()方法及其回调函数用法实例
Mar 25 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 Javascript
Vue代码整洁之去重方法整理
Aug 06 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 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
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
IE8 中使用加速器(Activities)
2010/05/14 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
jquery插件制作简单示例说明
2012/02/03 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
2012/03/14 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
python读取指定字节长度的文本方法
2019/08/27 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
python asyncio 协程库的使用
2021/01/21 Python
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
建筑施工实习自我鉴定
2013/09/19 职场文书
学校社会实践活动总结
2014/07/03 职场文书
兽医医药专业求职信
2014/07/27 职场文书
工程款申请报告
2015/05/15 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
2016年母亲节寄语
2015/12/04 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书
Redisson实现Redis分布式锁的几种方式
2021/08/07 Redis