js 判断键盘事件大全(兼容FireFox和IE,包括退格、回车、空格、方向键、删除键等)
复制代码 代码示例:
var keycode = event.keyCode;首先,e=e||event;这句代码是为了进行浏览器事件对象获取的兼容。js中这句代码的意思是,如果在FireFox或Opera中,隐藏的变量e是存在的,那么e||event返回e,如果在IE中,隐藏变量e是不存在,则返回event。
在这3种事件类型中,keydown和keyup比较底层,而keypress比较高级。这里所谓的高级是指,当用户按下shift + 1时,keypress是对这个按键事件进行解析后返回一个可打印的“!”字符,而keydown和keyup只是记录了shift + 1这个事件。[1]
var realkey = String.fromCharCode(event.keyCode);变量e表示发生击键事件,寻找是哪个键被按下,要使用which这个属性:
凡是涉及浏览器的js,就都要考虑浏览器兼容的问题。
alert("按键码: " + keycode + " 字符: " + realkey);
keyDown()函数有一个隐藏的变量--一般的,我们使用字母“e”来表示这个变量。
当浏览器读到这个语句时,无论按下键盘上的哪个键,都将呼叫KeyDown()函数。
document.onkeydown = keyDown;上面了解了在各种浏览器里是如何实现获取按键事件对象的方法,那么下面需要判断浏览器类型,这个方法很多,有比较方便理解的,也有很巧妙的办法,先说一般的方法:就是利用navigator对象的appName属性,当然也可以用userAgent属性,这里用appName来实现判断浏览器类型,IE和Maxthon的appName是“Microsoft Internet Explorer” ,而FireFox和Opera的appName是“Netscape”,所以一个功能比较简单的代码如下:
var keyName = String.fromCharCode(currKey);
复制代码 代码示例:
var realkey = String.fromCharCode(e.which);一、浏览器的按键事件
上述代码只是兼容了浏览器,获取了keyup事件对象,简单的弹出了按键码和按键的字符,但是问题出现了,当你按键时,字符键都是大写的,而按shift键时,显示的字符很奇怪,所以就需要优化一下代码了。
二、兼容浏览器
var keycode = event.keyCode;2.4 判断浏览器类型
比较简洁的方法是[2]:
2.3 IE的实现方法
}
alert("按键码: " + keycode + " 字符: " + realkey);
currKey=e.keyCode||e.which||e.charCode;
function keyUp(e) {
e.which
解释:
String.fromCharCode(e.which)
var realkey = String.fromCharCode(e.which);var realkey = String.fromCharCode(event.keyCode);
var keycode = e.which;
首先需要了解的是如何初始化该事件,基本语句如下:
alert("按键码: " + keycode + " 字符: " + realkey);
document.onkeydown = keyDown;
function keyDown() {
document.onkeyup = keyUp;
传递给keydown、keypress和keyup事件句柄的事件对象有一些通用的属性。如果Alt、Ctrl或Shift和一个按键一起按下,这通过事件的altKey、ctrlKey和shiftKey属性表示,这些属性在FireFox和IE中是通用的。
alert("按键码: " + currKey + " 字符: " + keyName);IE的程序不需要e变量,用window.event.keyCode来代替e.which,把键的索引值转化为真实键值方法类似:String.fromCharCode(event.keyCode),程序如下:
var currKey=0,e=e||event;
}
function keyUp(e) {
2.2 FireFox和Opera的实现方法
用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown、 onkeypress和onkeyup这三个事件句柄。一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup。
if(navigator.appName == "Microsoft Internet Explorer")复制代码 代码示例:
{
}
复制代码 代码示例:
但是keypress只能针对一些可以打印出来的字符有效,而对于功能按键,如F1-F12、Backspace、Enter、Escape、 PageUP、PageDown和箭头方向等,就不会产生keypress事件,但是可以产生keydown和keyup事件。然而在FireFox中,功能按键是可以产生keypress事件的。
}else2.1 事件的初始化
function keyDown(e) {
复制代码 代码示例:
FireFox和Opera等程序实现要比IE麻烦,所以这里先描述一下。把上面的语句放在一起,我们可以在FireFox中得到被按下的是哪一个键:
}
document.onkeydown = keyDown;
复制代码 代码示例:
复制代码 代码示例:
document.onkeyup = keyUp;其次,currKey=e.keyCode||e.which||e.charCode;这句是为了兼容浏览器按键事件对象的按键码属性(详见第三部分),如IE中,只有keyCode属性,而FireFox中有which和charCode属性,Opera中有keyCode和which属性等。 目前常用的浏览器主要有基于IE和基于Mozilla两大类。Maxthon是基于IE内核的,而FireFox和Opera是基于Mozilla内核的。
function keyDown(){}
{
相关热词:
本站内容来源于网络,如有侵权请与我们联系,我们会及时删除,我们深感抱歉!
注:本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规!
本文地址: https://v30.fanwenzhu.com/jq/jc/5808.shtml
相关文章
热门TAG
win10 ecshop 主机 阿里云 解决 配置 C# C++ 解析 SQL语句 命令 Go语言 方法 CSS3 HTML5 CSS win7 MSSQL 服务器配置 IIS7.5 IIS7 IIS6 IIS CentOS 7 Linux oracle数据库 oracle phpcms discuz discuz教程最新文章
-
PHP识别相片是否是颠倒的
时间:2020-12-28
-
python编程有哪些ide
时间:2020-12-28
-
python开发工程师是做什么
时间:2020-12-28
-
php构造函数的作用
时间:2020-12-28
-
php怎么跟数据库连接
时间:2020-12-28
-
php实现顺序线性表
时间:2020-12-28
-
Python多重继承中的菱形继
时间:2020-12-28
-
php中break的作用
时间:2020-12-28
热门文章
-
php中常用的正则表达式使用方法
时间:2020-12-25
-
asp与php区别是什么?
时间:2020-12-27
-
PHP识别相片是否是颠倒的,并且重新摆正
时间:2020-12-28
-
Yii授权之基于角色的存取控制 (RBAC)
时间:2020-12-23
-
php的一键安装包有哪些 php环境搭建
时间:2020-12-19
-
php实现对图片对称加解密(适用身份证加
时间:2020-12-25
-
php如何理解面向对象
时间:2020-12-28
-
超详细分析php docker的原理及作用
时间:2020-12-27
-
Python控制Excel实现自动化办公
时间:2020-12-23
-
session的作用是什么
时间:2020-12-25
