精华内容
下载资源
问答
  • JavaScript键盘事件五大经典案例 目录:JavaScript键盘事件五大经典案例1、什么是键盘事件2、常用键盘事件3、常用属性和方法4、案例4.1 京东搜索框4.2 快递单号输入查询4.3 文字禁止选中4.4 禁止右击菜单4.5 自定义...

    JavaScript键盘事件五大经典案例


    1、什么是键盘事件

    ​ 键盘事件就是我们对键盘的操作触发绑定元素对象的相关函数,比如敲击键盘上的某个键,按住键盘上的某个键,按组合快捷键后元素做出的函数行为……等这些都是键盘事件的体现。

    2、常用键盘事件

    事件说明
    onkeydown当按下某个键时触发的事件
    onkeypress当按下某个键时触发的事件(不识别功能键,如ctrl、shift…等)
    onkeyup当按下某个键松开是触发的事件

    注意:

    • 如果使用监听添加事件的方式,则不需要添加on
    元素对象.addEventListener("事件类型(不加on)"function(e){});
    
    • onkeypress与onkeyup和onkeydown最大的区别就在于不能识别功能键
    • keydown和keyup的事件对象是相同的,事件都不区分字母大小写(默认大写),keypress则会区分大小写
    • 如果一个元素分别绑定了这个三个事件,则触发的顺序为:keydown=》keypress=》keyup
    • 在实际开发中,使用更多的是keydown和keyup,因为它门能够识别键盘上的所有键

    3、常用属性和方法

    • keyCode

      ​ 该属性可以识别大小写,并返回其对应的ASCII值,一般我们使用该属性来判断用户的按键操作

    • e.preventDefault()

      该方法阻止默认事件(标准)

    • e.stopPropagation()

      该属性阻止事件冒泡

    • return false

      既阻止默认事件的触发,又阻止事件冒泡

    4、案例

    4.1 京东搜索框

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>京东搜索框</title>
        <style>
            input {
                display: block;
                width: 300px;
                height: 25px;
                border: 2px solid #e2231a;
                background-color: #ffffff;
                margin: 100px auto;
            }
        </style>
    </head>
    
    <body>
        <input type="text" placeholder="金典京东超级宠粉日,抢199键100券">
        <script>
            window.onload = function() {
                // 获取文本输入框
                var tBox = document.querySelector("input");
                // 给文档对象添加键盘按钮弹起的事件
                document.addEventListener("keyup", function(e) {
                    // 如果按下的键是s键
                    if (e.keyCode == 83) {
                        // 文本输入框获取焦点
                        tBox.focus()
                    }
                })
            }
        </script>
    </body>
    
    </html>
    

    4.2 快递单号输入查询

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>快递单号输入查询</title>
        <style>
            .box {
                width: 250px;
                margin: 100px auto;
                position: relative;
            }
            
            .poput {
                width: 160px;
                padding: 5px 5px;
                line-height: 20px;
                font-size: 12px;
                background-color: #f1f1f1;
                box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
                position: absolute;
                left: 80px;
                top: 2px;
                display: none;
            }
            
            .poput::before {
                content: "";
                width: 0;
                height: 0;
                border: 7px solid red;
                border-color: #f1f1f1 transparent transparent;
                position: absolute;
                top: 30px;
                left: 20px;
            }
            
            .lastBox {
                margin-top: 15px;
            }
        </style>
    </head>
    
    <body>
        <div class="box">
            <div>
                公司名称:<input type="text" placeholder="圆通快递" disabled="disabled">
            </div>
            <div class="poput">123</div>
            <div class="lastBox">
                快递单号:<input type="text" id="text">
            </div>
    
        </div>
        <script>
            window.onload = function() {
                // 获取文本输入框
                var text = document.querySelector("#text");
                // 获取弹出框
                var poput = document.querySelector(".poput");
    
                // 给文本框添加键盘按键弹起事件
                text.addEventListener("keyup", function(e) {
                    // 判断文本输入框是否为空
                    if (this.value == "") {
                        // 为空弹框就隐藏
                        poput.style["display"] = "none";
                    } else {
                        // 否则弹框出现,并且将文本输入框内的值赋值给弹出框
                        poput.style["display"] = "block";
                        poput.innerText = this.value;
                    }
                })
    
                // 给文本输入框添加失去鼠标焦点时的事件
                text.addEventListener("blur", function() {
                    // 失去焦点后,弹框隐藏
                    poput.style["display"] = "none";
                })
    
                //给文本输入框添加鼠标获取焦点时的事件
                text.addEventListener("focus", function() {
                    // 判断文本输入框是否为空
                    if (this.value == "") {
                        // 为空弹框就隐藏
                        poput.style["display"] = "none";
                    } else {
                        // 否则弹框出现,并且将文本输入框内的值赋值给弹出框
                        poput.style["display"] = "block";
                        poput.innerText = this.value;
                    }
                })
            }
        </script>
    </body>
    
    </html>
    

    4.3 文字禁止选中

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>js事件实现文字禁止选中功能</title>
        <style>
            p {
                text-indent: 2em;
            }
        </style>
    </head>
    
    <body>
        <p>人物、情节、环境是小说的三要素。情节一般包括开端、发展、高潮、结局四部分,有的包括序幕、尾声。环境包括自然环境和社会环境。 小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说(小小说)。按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代等。按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。</p>
        <script>
            // onselectstart 禁止选中事件
            //触发时间为目标对象被开始选中时(即选中动作刚开始,尚未实质性被选中)
            var p = document.querySelector("p");
            p.addEventListener("mouseover", function(e) {
                console.log(e.target);
                /* user-select 是css3新增的属性,用于设置用户是否能够选中文本。
                可用于除替换元素外的所有元素
                取值:
                [none]:文本不能被选中
                [text]:可以选择文本(默认)
                [all]:当所有内容作为一个整体时可以被选中。如果双击或者在上下文上点击子元素,
                    那么被选中的选择的部分将是以该子元素向上回溯的最高祖先元素
                [Element]:可以选择文本,但选择范围受元素边界的约束
                */
                e.target.style["userSelect"] = " none";
            })
        </script>
    </body>
    
    </html>
    

    4.4 禁止右击菜单

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>实现一个标签禁止右键菜单功能</title>
    
    </head>
    
    <body>
        <!DOCTYPE html>
        <html lang="en">
    
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>实现一个标签禁止右键菜单功能</title>
            <style>
                p {
                    text-indent: 2em;
                }
            </style>
        </head>
    
        <body>
            <p>人物、情节、环境是小说的三要素。情节一般包括开端、发展、高潮、结局四部分,有的包括序幕、尾声。环境包括自然环境和社会环境。 小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说(小小说)。按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代等。按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。</p>
            <script>
                var p = document.querySelector("p");
                /* 
                oncontextmenu:该事件在元素中用户右击鼠标时触发并打开上下文菜单
                 */
                p.addEventListener("contextmenu", function(e) {
                    //returnValue:取消事件的默认动作(非标准)
                    e.returnValue = false;
                    // preventDefault():或者取消事件的默认动作(标准)
                    e.preventDefault();
                })
            </script>
        </body>
    
        </html>
        <p></p>
        <script>
            window.onload = function() {
    
            }
        </script>
    </body>
    
    </html>
    

    4.5 自定义鼠标光标

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>图片替换光标功能</title>
        <style>
    
        </style>
    </head>
    
    <body>
        <div></div>
        <script>
            window.onload = function() {
                document.addEventListener("mouseover", function(e) {
                    // [cursor]:该属性规定要显示的光标类型(形状)
                    // 该属性规定鼠标指针放在元素边界范围内时所有的光标形状
                    e.target.style["cursor"] = "url(./images/鼠标光标.png),auto";
                })
            }
        </script>
    </body>
    
    </html>
    
    展开全文
  • js 键盘事件

    千次阅读 2019-01-07 11:55:58
    onkeydown:当键盘按键按下的时候触发 ...当一个事件发生的时候,如果ctrl || shift || alt 是按下的状态,返回true,否则返回false 当鼠标按住ctrl键并点击页面,返回true,若只点击页面,则返回f...

    onkeydown:当键盘按键按下的时候触发

    onkeyup:当键盘按键抬起的时候触发

    event.keyCode:数字类型 键盘按键的值 键值

    ctrlKey,shiftKey,altKey 布尔值

    当一个事件发生的时候,如果ctrl || shift || alt 是按下的状态,返回true,否则返回false

    当鼠标按住ctrl键并点击页面,返回true,若只点击页面,则返回false.

    留言本,回车输入效果

    发现输入一个字幕就会添加一个li

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="{CHARSET}">
            <title></title>
            <script type="text/javascript">
                window.onload = function(){
                    var oText = document.getElementById('text1');
                    var oUl = document.getElementById('ul1');
                    
                    oText.onkeyup = function(){
                        var ev = ev || event;
                        
                        if(this.value != ''){
                            if(ev.keyCode == 13 ){
                                var oLi = document.createElement('li');
                                oLi.innerHTML = this.value;
                                if(oUl.children[0]){
                                    oUl.insertBefore(oLi,oUl.children[0]);
                                }else{
                                    oUl.appendChild(oLi);
                                }
                            }
                        }
                    }
                }
            </script>
        </head>
        <body>
            <input type="text" id="text1"/>
            <ul id="ul1"></ul>
        </body>
    </html>

    -------------------------键盘控制divyi---------------------------------------------------------------------

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="{CHARSET}">
            <title></title>
            <style>
                #div1{width: 100px ;height: 100px;background: blue;position: absolute; }
            </style>
            <script type="text/javascript">
                window.onload = function(){
                    var oDiv = document.getElementById('div1');
                    //不是所有元素都能够接收键盘事件,能够响应用户输入的元素,能够接收焦点的元素就能接收键盘事件
                    //onkeydown:如果按下不抬起,那么会连续触发

                    document.onkeydown = function(ev){
                        var ev = ev || event; 
                        switch(ev.keyCode){
                            case 37:
                            oDiv.style.left = oDiv.offsetLeft -10 +'px';
                            break;
                            case 38:
                            oDiv.style.top = oDiv.offsetTop -10 +'px';
                            break;
                            case 39:
                            oDiv.style.left = oDiv.offsetLeft +10 +'px';
                            break;
                            case 40:
                            oDiv.style.top = oDiv.offsetTop +10 +'px';
                            break;
                        }
                    }
                }
            </script>
        </head>
        <body>
            <div id="div1"></div>
        </body>
    </html>

    思考:如果打游戏的时候,用户连续按某一键,电脑会判断用户是否是要连续输入某一值,会有一小段时间间隔,游戏会因这一小段延迟,over掉,所以怎么解决呢?

    注意:

    例子:按下shift键实现全选

    展开全文
  • 可以根据按的键盘上的键,显示键盘动作,并显示keyCode值等
  • js键盘事件

    2013-12-15 01:52:02
    js键盘事件
  • 本文实例为大家分享了js键盘事件实现人物行走的具体代码,供大家参考,具体内容如下 描述: 小时候喜欢玩的一个游戏,魔塔,实现了人物的行走,以及跳跃,当然是2D的效果。 用到的图: 效果: 代码: <!...
  • 键盘事件 键盘事件 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]不过并不止提交按钮会激发form的submit事件,连同上面的归纳如下: 1. 如果表单里有一个type=”submit”的按钮,回车键生效。 2. 如果表单里...
  • JS键盘事件(非常详细)

    千次阅读 2020-09-01 11:42:11
    JavaScript中,当用户操作键盘时,会触发键盘事件键盘事件主要包括下面3中类型: keydown: 在键盘上按下某个键时触发。如果按住某个键,会不断触发该事件,但是Opera浏览器不支持这种连续操作。该事件处理函数...

    在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是否按下Meta键,如果按下返回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键等。不过常用功能键和字符键都是比较稳定的,如下表所示。

    键位和码值对照表

    键位码值键位码值
    0~9(数字键)48~57A~Z(字母键)65~90
    Backspace(退格键)8Tab(制表键)9
    Enter(回车键)13Space(空格键)32
    Left arrow(左箭头键)37Top arrow(上箭头键)38
    Rigth arrow(右箭头键)39Down arrow(下箭头键) 40

    示例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属性可以存取它在页面中的位置。

    键盘响应顺序

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

    对于字符键来说,键盘事件的响应顺序: 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>

    演示效果如下:

    当分别输入A、B、C时:

    当分别输入Shift、Ctrl、Alt功能键时:

    当连续按下字符A时:

    当连续按下Shift键时:

     

    展开全文
  • 本文实例为大家分享了JavaScript键盘事件响应顺序的具体实现代码,供大家参考,具体内容如下 键盘响应顺序 当按下键盘时,会触发多个事件,它们将按顺序发生。 对于字符键来说,键盘事件的影响顺序如下: 1.keydown...
  • 本文实例讲述了JavaScript键盘事件常见用法。分享给大家供大家参考,具体如下: JavaScript 键盘事件有以下3种 keydown 键盘按键按下(如果按着不放,会持续触发该事件),可以捕获组合键。 keypress 键盘非功能按键...
  • 下面小编就为大家带来一篇js监听键盘事件的方法_原生和jquery的区别详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要介绍了使用JS监听键盘按下事件(keydown event),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • Js键盘事件

    2019-12-18 11:17:57
    写小游戏:JS键盘事件 相信大家都玩过4399小游戏,这些小游戏都是网页版的,可以说比较初级,当然我们做的很更低价一些,那么小凡玉就带大家看看吧。 首先我们需要了解JavaScript键盘事件,这样我们才能制作出上下...

    写小游戏:JS键盘事件

    相信大家都玩过4399小游戏,这些小游戏都是网页版的,可以说比较初级,当然我们做的很更低价一些,那么小凡玉就带大家看看吧。
    首先我们需要了解JavaScript的键盘事件,这样我们才能制作出上下左右。

    <script type="text/javascript" language=JavaScript charset="UTF-8">
          document.onkeydown=function(event){
                var e = event || window.event || arguments.callee.caller.arguments[0];
                if(e && e.keyCode == 65){ // 按 A 
                    //向左移动
                }
                if(e && e.keyCode==68){ // 按 D
                     //向右移动
                }            
                if(e && e.keyCode == 83){ // 按 S
                    //向下移动
                }
                if(e && e.keyCode == 87){ // 按 W
                    //向上移动
                }
            }; 
    </script>
    

    例如这样,当键盘有按键被按时事件就会自动触发,再用对象e判断用户按了什么键,再决定做什么事。
    键位列表如下:

    keyCode 8 = BackSpace BackSpace
    keyCode 9 = Tab Tab
    keyCode 12 = Clear
    keyCode 13 = Enter
    keyCode 16 = Shift_L
    keyCode 17 = Control_L
    keyCode 18 = Alt_L
    keyCode 19 = Pause
    keyCode 20 = Caps_Lock
    keyCode 27 = Escape Escape
    keyCode 32 = space
    keyCode 33 = Prior
    keyCode 34 = Next
    keyCode 35 = End
    keyCode 36 = Home
    keyCode 37 = Left
    keyCode 38 = Up
    keyCode 39 = Right
    keyCode 40 = Down
    keyCode 41 = Select
    keyCode 42 = Print
    keyCode 43 = Execute
    keyCode 45 = Insert
    keyCode 46 = Delete
    keyCode 47 = Help
    keyCode 48 = 0 equal braceright
    keyCode 49 = 1 exclam onesuperior
    keyCode 50 = 2 quotedbl twosuperior
    keyCode 51 = 3 section threesuperior
    keyCode 52 = 4 dollar
    keyCode 53 = 5 percent
    keyCode 54 = 6 ampersand
    keyCode 55 = 7 slash braceleft
    keyCode 56 = 8 parenleft bracketleft
    keyCode 57 = 9 parenright bracketright
    keyCode 65 = a A
    keyCode 66 = b B
    keyCode 67 = c C
    keyCode 68 = d D
    keyCode 69 = e E EuroSign
    keyCode 70 = f F
    keyCode 71 = g G
    keyCode 72 = h H
    keyCode 73 = i I
    keyCode 74 = j J
    keyCode 75 = k K
    keyCode 76 = l L
    keyCode 77 = m M mu
    keyCode 78 = n N
    keyCode 79 = o O
    keyCode 80 = p P
    keyCode 81 = q Q at
    keyCode 82 = r R
    keyCode 83 = s S
    keyCode 84 = t T
    keyCode 85 = u U
    keyCode 86 = v V
    keyCode 87 = w W
    keyCode 88 = x X
    keyCode 89 = y Y
    keyCode 90 = z Z
    keyCode 96 = KP_0 KP_0
    keyCode 97 = KP_1 KP_1
    keyCode 98 = KP_2 KP_2
    keyCode 99 = KP_3 KP_3
    keyCode 100 = KP_4 KP_4
    keyCode 101 = KP_5 KP_5
    keyCode 102 = KP_6 KP_6
    keyCode 103 = KP_7 KP_7
    keyCode 104 = KP_8 KP_8
    keyCode 105 = KP_9 KP_9
    keyCode 106 = KP_Multiply KP_Multiply
    keyCode 107 = KP_Add KP_Add
    keyCode 108 = KP_Separator KP_Separator
    keyCode 109 = KP_Subtract KP_Subtract
    keyCode 110 = KP_Decimal KP_Decimal
    keyCode 111 = KP_Divide KP_Divide
    keyCode 112 = F1
    keyCode 113 = F2
    keyCode 114 = F3
    keyCode 115 = F4
    keyCode 116 = F5
    keyCode 117 = F6
    keyCode 118 = F7
    keyCode 119 = F8
    keyCode 120 = F9
    keyCode 121 = F10
    keyCode 122 = F11
    keyCode 123 = F12
    keyCode 124 = F13
    keyCode 125 = F14
    keyCode 126 = F15
    keyCode 127 = F16
    keyCode 128 = F17
    keyCode 129 = F18
    keyCode 130 = F19
    keyCode 131 = F20
    keyCode 132 = F21
    keyCode 133 = F22
    keyCode 134 = F23
    keyCode 135 = F24
    keyCode 136 = Num_Lock
    keyCode 137 = Scroll_Lock
    keyCode 187 = acute grave
    keyCode 188 = comma semicolon
    keyCode 189 = minus underscore
    keyCode 190 = period colon
    keyCode 192 = numbersign apostrophe
    keyCode 210 = plusminus hyphen macron
    keyCode 211 =
    keyCode 212 = copyright registered
    keyCode 213 = guillemotleft guillemotright
    keyCode 214 = masculine ordfeminine
    keyCode 215 = ae AE
    keyCode 216 = cent yen
    keyCode 217 = questiondown exclamdown
    keyCode 218 = onequarter onehalf threequarters
    keyCode 220 = less greater bar
    keyCode 221 = plus asterisk asciitilde
    keyCode 227 = multiply division
    keyCode 228 = acircumflex Acircumflex
    keyCode 229 = ecircumflex Ecircumflex
    keyCode 230 = icircumflex Icircumflex
    keyCode 231 = ocircumflex Ocircumflex
    keyCode 232 = ucircumflex Ucircumflex
    keyCode 233 = ntilde Ntilde
    keyCode 234 = yacute Yacute
    keyCode 235 = oslash Ooblique
    keyCode 236 = aring Aring
    keyCode 237 = ccedilla Ccedilla
    keyCode 238 = thorn THORN
    keyCode 239 = eth ETH
    keyCode 240 = diaeresis cedilla currency
    keyCode 241 = agrave Agrave atilde Atilde
    keyCode 242 = egrave Egrave
    keyCode 243 = igrave Igrave
    keyCode 244 = ograve Ograve otilde Otilde
    keyCode 245 = ugrave Ugrave
    keyCode 246 = adiaeresis Adiaeresis
    keyCode 247 = ediaeresis Ediaeresis
    keyCode 248 = idiaeresis Idiaeresis
    keyCode 249 = odiaeresis Odiaeresis
    keyCode 250 = udiaeresis Udiaeresis
    keyCode 251 = ssharp question backslash
    keyCode 252 = asciicircum degree
    keyCode 253 = 3 sterling
    keyCode 254 = Mode_switch
    

    那么有了上下左右写个小游戏是不是易如反掌了呢?

    展开全文
  • JavaScript键盘事件

    2020-08-18 19:52:21
    <... <head> <meta charset="UTF-8"> <...script type="text/javascript... * 键盘事件 * onkeydown * - 按键被按下 * - 对于onkeydown来说如果一直按着某个按键不松手,则事件会.
  • js键盘事件的keyCode

    2020-10-25 15:06:07
    本节主要介绍了js键盘事件的keyCode,在你按下键时会弹出它的键码,需要的朋友可以参考下
  • 本文实例分析了js键盘事件。分享给大家供大家参考。具体分析如下: 该实例效果: 按键盘上的任意一个键,弹出相应的ASCII码,兼容ie,chrome和firefox。 但还是有不少问题: (1)ie和chrome中,一些键没有效果,...
  • 对于字符键来说,键盘事件的影响顺序如下: 1.keydown 2.keypress 3.keyup 对于非字符键(如功能键或特殊键)来说,键盘事件的响应顺序如下: 1.keydown 2.keyup 如果按下字符键不放,则keydown和keypress事件将逐个...
  • js键盘回车事件

    2012-07-26 17:14:41
    js键盘回车事件,下载即可用,简单实用...
  • //键盘事件 // console.log(event.keyCode); //用于获取键盘中上下左右键的ASCII码 var speed = 10 //设置移动距离和方式 if ( event . ctrlkey ) { speed = 50 ; } switch ( event...
  • js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown、 onkeypress和onkeyup这三个事件句柄。一个典型的按键会产生所有这三种事件,依次是keydown,keypress,...
  • JavaScript回车事件等键盘事件

    千次阅读 2020-07-09 21:31:09
    JavaScript回车事件等键盘事件JavaScript键盘事件键盘事件属性键盘响应顺序JavaScript 监听回车事件Keycode对照表 JavaScript键盘事件 在 JavaScript 中,当用户操作键盘时,会触发键盘事件,键盘事件主要包括下面 3...
  • 键盘事件实现div移动 键盘事件:onkeydown 按键按下,连续按下时,第一次和第二次会停顿一下,防止误操作 onkeyup 按键松开 这两个事件一般会绑定给可以获取焦点的一些元素或者document元素 可通过keyCode来获取...
  • js键盘事件编码

    千次阅读 2018-07-02 14:32:06
    项目经常会用到键盘快捷方式,需要使用键盘编码,下面根据网上找到的资料,整理如下:&lt;script type="text/javascript"&gt; document.onkeydown = function(e){ e = e || window.event || ...
  • if(oevent.ctrlKey && oevent.keyCode == 13){ …… } } txt1:绑定事件的对象,例如:一个文本输入框input。 oevent:事件对象(包含事件的很多有用详情)。 keyCode:可以获取到键盘按下的键值。例如:回车键就是13。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 121,200
精华内容 48,480
关键字:

js键盘事件