• 技术文章 >web前端 >前端问答

    javascript有几种键盘事件

    青灯夜游青灯夜游2022-02-17 18:15:04原创411

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

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

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

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

    当获取用户正按下键码时,可以使用 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有几种键盘事件的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:javascript 键盘事件
    上一篇:css3的translate3d用法是什么 下一篇:vue和laravel有什么区别
    千万级数据并发解决方案

    相关文章推荐

    • JavaScript经典讲解之设计模式(实例详解)• javascript怎么修改元素节点的属性• JavaScript中两个数字怎么求最大值• 一起聊聊Javascript之Proxy与Reflect• 完全掌握JavaScript预编译过程• javascript怎么将值类型强制转为字符串
    1/1

    PHP中文网