js常用的键盘事件有哪些(用法示例)_键码keyCode对照表

 更新时间:2023年02月11日 09:45:10   投稿:yin  
用户按下键盘上的键,首先会触发keydown事件,然后是keypress事件,最后是keyup事件。其中,keydown和keypress事件是在文本框发生变化之前被触发;而keyup在文本框发生变化之后被触发。如果用户按下一个键不放,就会重复触发keydown和keypress事件。
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

键盘事件与鼠标事件类似,同样常出现在JavaScript开发过程中。键盘事件的触发过程具体是这样的: 在用户按下键盘上的一个字符键时, 首先会触发keydown事件,然后是keypress事件,最后是keyup事件。其中,keydown和keypress事件是在文本框发生变化之前 被触发;而keyup在文本框发生变化之后被触发。如果用户按下一个键不放,就会重复触发keydown和keypress事件。在用户按下一个非字符键时,首先触发keydown事件,然后就是keyup事件。如果用户按下一个键不放,就会重复触发keydown。

一、键盘事件属性

键盘定义了很多属性,如下表所示。利用这些属性可以精确控制键盘操作。键盘事件属性一般只在键盘相关事件发生时才会存在于事件对象中,但是 ctrlKey 和 shiftKey 属性除外,因为它们可以在水保事件中存在。例如,当按下 Ctrl 或Shift 键时单击鼠标操作。
键盘事件定义的属性

属性说明
keyCode该属性包含键盘中对应键位的键值
charCode该属性包含键盘中对应键位的 Unicode 编码,仅 DOM 支持
target发生事件的节点(包含元素),仅 DOM 支持
srcElement发生事件的元素,仅 IE 支持
shiftKey是否按下 Shift 键,如果按下返回 true,否则为false
ctrlKey是否按下 Ctrl 键,如果按下返回 true,否则为false
altKey是否按下 Alt 键,如果按下返回 true,否则为false
metaKey是否按下 Mtea 键,如果按下返回 true,否则为false,仅 DOM 支持

示例1

ctrlKey 和 shiftKey 属性可存在于键盘和鼠标事件中,表示键盘上的 Ctrl 和 Shift 键是否被按住。下面示例能够监测 Ctrl 和 Shift 键是否被同时按下。如果同时按下,且鼠标单击某个页面元素,则会把该元素从页面中删除。

    document.onclick = function (e) {
        var e = e || window.event;  //标准化事件对象
        var t = e.target || e.srcElement;  //获取发生事件的元素,兼容IE和DOM
        if (e.ctrlKey && e.shiftKey) {  //如果同时按下Ctrl和Shift键
            t.parentNode.removeChild(t);  //移出当前元素
        }
    }

 keyCode 和 charCode 属性使用比较复杂,但是它们在实际开发中又比较常用,故比较这两个属性在不同事件类型和不同浏览器中的表现时非常必要的,如下表所示。读者可以根据需要有针对性的选用事件响应类型和引用属性值。

keyCode 和 charCode 属性值

属性IE 事件模型DOM 事件模型
keyCode(keypress)返回所有字符键的正确值,区分大写状态(65~90)和小写状态(97~122)功能键返回正确值,而 Shift、Ctrl、Alt、PrintScreen、ScrollLock 无返回值,其他所有键值都返回 0
keyCode(keydown)返回所有键值(除 PrintScreen 键),字母键都以大写状态显示键值(65~90)返回所有键值(除 PrintScreen 键),字母键都以大写状态显示键值(65~90)
keyCode(keyup)返回所有键值(除 PrintScreen 键),字母键都以大写状态显示键值(65~90)返回所有键值(除 PrintScreen 键),字母键都以大写状态显示键值(65~90)
charCode(keypress)不支持该属性返回字符键,区分大写状态(65~90)和小写状态(97~122),Shift、Ctrl、Alt、PrintScreen、ScrollLock 无返回值,其他所有键值都返回 0
charCode(keydown)不支持该属性所有键值为 0
charCode(keyup)不支持该属性所有键值为 0

某些键的可用性不是很正确,如 PageUp 和 Home 键等。不过常用功能键和字符键都是比较稳定的。

示例2

下面示例演示了如何使用方向键控制页面元素的移动效果。

<div id="box"></div>
<script>
    var box = document.getElementById("box");  // 获取页面元素的引用指针
    box.style.position = "absolute";  // 色块绝对定位
    box.style.width = "20px";  // 色块宽度
    box.style.height = "20px";  // 色块高度
    box.style.backgroundColor = "red";  // 色块背景
    document.onkeydown = keyDown;
    //在Document对象中注册keyDown事件处理函数
    function keyDown(event){  // 方向键控制元素移动函数
        var event = event || window.event;  // 标准化事件对象
        switch(event.keyCode){  // 获取当前按下键盘键的编码
            case 37 :  // 按下左箭头键,向左移动5个像素
                box.style.left = box.offsetLeft - 5  + "px";
                break;
            case 39 :  // 按下右箭头键,向右移动5个像素
                box.style.left = box.offsetLeft + 5 + "px";
                break;
            case 38 :  // 按下上箭头键,向上移动5个像素
                box.style.top = box.offsetTop  - 5 + "px";
                break;
            case 40 :  // 按下下箭头键,向下移动5个像素
                box.style.top = box.offsetTop  + 5 + "px";
                break;
        }
        return false
    }
</script>

 在上面示例中,首先获取页面元素,通过 CSS 脚本控制元素绝对定位、大小和背景色。然后在 document 对象上注册鼠标按下事件类型处理函数,在事件回调函数 keyDown() 中侦测当前按下的方向键,并决定定位元素在窗口中的位置。其中元素的 offsetLeft 和 offsetTop 属性可以存取它在页面中的位置。

键盘响应顺序

键盘事件主要包括下面 3 种类型:

  • keydown:在键盘上按下某个键时触发。如果按住某个键,会不断触发该事件,但是 Opera 浏览器不支持这种连续操作。该事件处理函数返回 false 时,会取消默认的动作(如输入的键盘字符,在 IE 和 Safari 浏览器下还会禁止keypress 事件响应)。
  • keypress:按下某个键盘键并释放时触发。如果按住某个键,会不断触发该事件。该事件处理函数返回 false 时,会取消默认的动作(如输入的键盘字符)。
  • keyup:释放某个键盘键时触发。该事件仅在松开键盘时触发一次,不是一个持续的响应状态。

当获取用户正按下键码时,可以使用 keydown、keypress 和 keyup 事件获取这些信息。其中 keydown 和 keypress 事件基本上是同义事件,它们的表现也完全一致,不过一些浏览器不允许使用 keypress 事件获取按键信息。所有元素都支持键盘事件,但键盘事件多被应用在表单输入中。

当按下键盘时,会连续触发多个事件,它们将按如下顺序发生。

对于字符键来说,键盘事件的响应顺序:keydown → keypress → keyup。对于非字符键(如功能键或特殊键)来说,键盘事件的相应顺序:keydown → keyup。

如果按下字符键不放,则 keydown 和 keypress 事件将逐个持续发生,直至松开按键。如果按下非字符键不放,则只有 keydown 事件持续发生,直至松开按键。

示例

下面设计一个简单示例,以获取键盘事件相应顺序。

<textarea id="text" cols="26" rows="16"></textarea>
<script>
    var n = 1;  // 定义编号变量
    var text = document.getElementById("text");  // 获取文本区域的引用指针
    text.onkeydown = f;  // 注册keydown事件处理函数
    text.onkeyup = f;  // 注册keyup事件处理函数
    text.onkeypress = f;  // 注册keypress事件处理函数
    function f(e){  // 事件调用函数
        var e = e || window.event;  // 标准化事件对象
        text.value += (n++) + "=" + e.type +"  (keyCode=" + e.keyCode + ")\n";
        //捕获事件响应信息
    }
</script>

键盘键码keyCode对照表

字母和数字键的键码值(keyCode)
按键键码按键键码按键键码按键键码
A65J74S83149
B66K75T84250
C67L76U85351
D68M77V86452
E69N78W87553
F70O79X88654
G71P80Y89755
H72Q81Z90856
I73R82048957
数字键盘上的各键键码值(keyCode)功能键键码值(keyCode)
按键键码按键键码按键键码按键键码
0968104F1112F9120
1979105F2113F10121
298*106F3114F11122
399+107F4115F12123
4100Enter108F5116
5101-109F6117
6102.110F7118
7103/111F8119
控制键键码值(keyCode)
按键键码按键键码按键键码按键键码
BackSpace8Esc27Right Arrow39-_189
Tab9Spacebar32Dw Arrow40.>190
Clear12Page Up33Insert45/?191
Enter13Page Down34Delete46`~192
Shift16End35Num Lock144[{ 219
Control17Home36;:186\|220
Alt18Left Arrow37=+187]}221
Cape Lock20Up Arrow38,<188'"222
多媒体键码值(keyCode)
按键键码按键键码
音量加175浏览器172
音量减174邮件180
停止179搜索170
静音173收藏171

到此这篇关于js常用的键盘事件有哪些_用法示例_键码keyCode对照表的文章就介绍到这了,更多相关js键盘事件keyCode内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家!

相关文章

  • JavaScript数据类型详解

    JavaScript数据类型详解

    这篇文章主要介绍了JavaScript数据类型详解,本文详细讲解了JavaScript中有5种基本数据类型:Undefined、Null、Boolean、Number和String,需要的朋友可以参考下
    2015-04-04
  • JavaScript中的Object对象学习教程

    JavaScript中的Object对象学习教程

    这篇文章主要介绍了JavaScript中的Object对象学习教程,是JavaScript入门学习中的基础知识,需要的朋友可以参考下
    2016-05-05
  • JavaScript 内置对象属性及方法集合

    JavaScript 内置对象属性及方法集合

    JavaScript内置对象属性及方法大全,学习js的朋友可以收藏下, 方便以后的学习。
    2010-07-07
  • 全面理解闭包机制

    全面理解闭包机制

    下面小编就为大家带来一篇全面理解闭包机制。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • javascript学习笔记(五) Array 数组类型介绍

    javascript学习笔记(五) Array 数组类型介绍

    javascript学习笔记之Array 数组类型介绍,需要的朋友可以参考下
    2012-06-06
  • JavaScript sub方法入门实例(把字符串显示为下标)

    JavaScript sub方法入门实例(把字符串显示为下标)

    这篇文章主要介绍了JavaScript sub方法入门实例,sub方法用于把字符串显示为下标,需要的朋友可以参考下
    2014-10-10
  • JavaScript 基础问答一

    JavaScript 基础问答一

    今天在网上看到了一份很不错的JavaScript FAQ,由于担心自己并不能一直把它读完,所以就尝试翻译一些内容,和朋友们一起分享。
    2008-12-12
  • TypeScript具有的几个不同特质

    TypeScript具有的几个不同特质

    这篇文章主要介绍了TypeScript具有的几个不同特质,首先我们先来看看什么是TypeScript呢?TypeScript是微软推出的一个开源语言,用于开发大型JS应用程序。其作者是大名鼎鼎的C#之父Anders Hejlsberg。
    2015-04-04
  • 简单掌握JavaScript中const声明常量与变量的用法

    简单掌握JavaScript中const声明常量与变量的用法

    const和let一样,也是ES6版本中引入的新关键字,下面我们就通过例子来简单掌握JavaScript中const关键词声明常量与变量的用法
    2016-05-05
  • Javascript中Array.prototype.map()详解

    Javascript中Array.prototype.map()详解

    map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用;那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。
    2014-10-10

最新评论

?


http://www.vxiaotou.com