iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >javascript的键盘事件有哪些
  • 499
分享到

javascript的键盘事件有哪些

2024-04-02 19:04:59 499人浏览 泡泡鱼
摘要

这篇文章主要介绍“javascript的键盘事件有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“javascript的键盘事件有哪些”文章能帮助大家解决问题。

这篇文章主要介绍“javascript的键盘事件有哪些”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“javascript的键盘事件有哪些”文章能帮助大家解决问题。

javascript有3种键盘事件:1、keydown事件,在键盘上按下某个键时触发;2、keypress事件,按下某个键盘键并释放时触发;3、keyup事件,释放某个键盘键时触发。

教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

在 JavaScript 中,当用户操作键盘时,会触发键盘事件。

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

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

  • keypress:按下某个键盘键并释放时触发。如果按住某个键,会不断触发该事件。该事件处理函数返回 false 时,会取消默认的动作(如输入的键盘字符)。

  • keyup:释放某个键盘键时触发。该事件仅在松开键盘时触发一次,不是一个持续的响应状态。

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

示例

下面示例实时捕获键盘操作的各种细节,即键盘响应事件类型及对应的键值。

<textarea id="key"></textarea>
<script>
    var key = document.getElementById("key");
    key.onkeydown =f;  //注册keydown事件处理函数
    key.onkeyup = f;  //注册keyup事件处理函数
    key.onkeypress = f;  //注册keypress事件处理函数
    function f (e) {
        var e = e || window.event;  //标准化事件处理
        var s = e.type + " " + e.keyCode;  //获取键盘事件类型和按下的值
        key.value = s;
    }
</script>

键盘事件属性

键盘定义了很多属性,如下表所示。利用这些属性可以精确控制键盘操作。键盘事件属性一般只在键盘相关事件发生时才会存在于事件对象中,但是 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 支持

关于“javascript的键盘事件有哪些”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网JavaScript频道,小编每天都会为大家更新不同的知识点。

--结束END--

本文标题: javascript的键盘事件有哪些

本文链接: https://www.lsjlt.com/news/88912.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作