美文网首页
快速上手jQuery键盘绑定事件

快速上手jQuery键盘绑定事件

作者: 四爷来了 | 来源:发表于2019-05-07 11:31 被阅读0次

快速上手jQuery键盘绑定事件

1、怎样识别键盘码keyCode?

方法一

网页版,有大神已经写好了,你只要敲击键盘,网页上会自动显示你所敲击的代码的keyCode,网址如下哦:

http://keycode.info/

方法二

自给自足,自己写一个事件,获取代码:
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
    $(window).keydown(function (event) {
       console.log(event.keyCode)//你敲击了哪个键,打印出来的就是哪个键的键盘码
        };
    })

</script>

2、使用案例

keydown事件有一个keyCode属性,可以记录你敲击的键盘的识别码,我们在绑定事件的时候也可以反向使用这个键盘码,利用判断语句,当我们敲击的键的keyCode是和我们预设的一样,那我们就让他去执行我们事先写好的代码

请看一个简单的案例:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>title</title>
</head>

<body>
</body>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
    $(window).keydown(function (e) {
        switch (e.keyCode) {
            case 38:
                alert('你敲击了UP键!');
                break;
            case 40:
                alert('你敲击了DOWN键!');
                break;
            case 37:
                alert('你敲击了LEFT键!');
                break;
            case 39:
                alert('你敲击了RIGHT键!');
                break;
            default:
                alert('哥哥,你敲错了!')
                break;
        }
    })

</script>

</html>

相关文章

  • 快速上手jQuery键盘绑定事件

    快速上手jQuery键盘绑定事件 1、怎样识别键盘码keyCode? 方法一 方法二 2、使用案例 keydown...

  • vue基本语法

    快速入门 v-on: click 事件绑定 v-on:keydom 键盘绑定 v-on:mouseover 获取焦...

  • Jquery day_3

    1.1 Jquery 事件注册 1.2 jquery 事件处理 on(): 用于事件绑定,目前最好用的事件绑定方...

  • jquery对节点的操作

    Jquery对事件的绑定 $().bind(“事件类型”, 事件处理); 给jquery绑定一个事件$().bi...

  • 通过jquery动态添加的元素绑定事件

    1.一般通过jquery绑定事件# 2.通过jquery添加的元素绑定事件#

  • jQuery中绑定事件时bind和on的区别

    jquery的bind跟on绑定事件的区别:主要是事件冒泡;jquery文档中bind和on函数绑定事件的用法: ...

  • jquery的bind跟on绑定事件的区别

    jquery的bind跟on绑定事件的区别:主要是事件冒泡; jquery文档中bind和on函数绑定事件的用法:...

  • 03-jQuery事件相关

    事件绑定与解绑 jQuery中有两种绑定事件方式eventName(fn);编码效率略高/部分事件jQuery没有...

  • jQuery事件

    1、jquery 如何绑定事件?直接绑定和使用事件代理分别如何使用 jquery在1.7版本之前绑定事件可通过bi...

  • jQuery知识整理

    jQuery jQuery和DOM关系 jquery框架对象分析 加载事件 事件绑定 动画效果 jquery封装的...

网友评论

      本文标题:快速上手jQuery键盘绑定事件

      本文链接:https://www.haomeiwen.com/subject/rdfiwqtx.html