用jquery 和 jquery.simulate.js 实现模拟键盘事件，点击上下左右div相当于点击键盘的上下左右键

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <title></title>

        <style type="text/css">

            #box {

                width: 50px;

                height: 50px;

                position: absolute;

                left: 50%;

                top: 50%;

                transform: translate(-50%, -50%);

                background: lightskyblue;

            }

            .box-wrapper {

                width: 100px;

                height: 100px;

                position: fixed;

                bottom: 0;

                left: 0;

                background: blue;

            }

            .box {

                float: left;

                background-color: orange;

                font-size: 30px;

                width: 50px;

                text-align: center;

                height: 50px;

            }

            .box:nth-child(1){

                background-color: pink;

            }

            .box:nth-child(4){

                background-color: blueviolet;

            }

        </style>

    </head>

    <script type="text/javascript">

        window.onload = function() {

            var box1 = document.getElementById("box");

            document.onkeydown = function(event) {

                event = event || window.event; /*||为或语句，当IE不能识别event时候，就执行window.event 赋值*/

                console.log(event.keyCode);

                switch(event.keyCode) { /*keyCode:字母和数字键的键码值*/

                    /*37、38、39、40分别对应左上右下*/

                    case 37:

                        box1.style.left = box1.offsetLeft - 10 + "px"; /*图形左移*/

                        break;

                    case 38:

                        box1.style.top = box1.offsetTop - 10 + "px"; /*图形上移*/

                        break;

                    case 39:

                        // alert("你点击了右键");

                        // alert(box1.offsetLeft + 10 + "px");

                        box1.style.left = box1.offsetLeft + 10 + "px"; /*图形右移*/

                        break;

                    case 40:

                        box1.style.top = box1.offsetTop + 10 + "px"; /*图形下移*/

                        break;

                }

            }

        }

    </script>

    <body>

        <div id="box">

        </div>

        <div class="box-wrapper">

            <div class="box" ontouchend="arrow_click(2,'up')" ontouchstart="arrow_click(1,'up')">

                ↑

            </div>

            <div class="box" ontouchend="arrow_click(2,'down')" ontouchstart="arrow_click(1,'down')">

                ↓

            </div>

            <div class="box" ontouchend="arrow_click(2,'left')" ontouchstart="arrow_click(1,'left')">

                ←

            </div>

            <div class="box" ontouchend="arrow_click(2,'right')" ontouchstart="arrow_click(1,'right')">

                →

            </div>

        </div>

    </body>

    <script src="jq3.1.1.js" type="text/javascript" charset="utf-8"></script>

    <script src="jquery.simulate.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">

        function arrow_click(k_type, type) {

            var t = jQuery.simulate.keyCode;

            var e = $('#box');

            var k_event = k_type == 1 ? 'keydown' : 'keyup';

            switch(type) {

                case 'right':

                    $(e).simulate(k_event, {

                        keyCode: t.RIGHT

                    });

                    break;

                case 'left':

                    $(e).simulate(k_event, {

                        keyCode: t.LEFT

                    });

                    break;

                case 'up':

                    $(e).simulate(k_event, {

                        keyCode: t.UP

                    });

                    break;

                case 'down':

                    $(e).simulate(k_event, {

                        keyCode: t.DOWN

                    });

                    break;

                case 'space':

                    $(e).simulate(k_event, {

                        keyCode: t.SPACE

                    });

                    break;

            }

        }

    </script>

</html>

初识 jquery.simulate.js 模拟键盘事件的更多相关文章

  1. JS模拟键盘事件 -- 原理及小例子

    提问: 键盘默认事件,比如tab切换,alt+f4关闭,ctrl+t新建等,如果不想通过键盘而是一些按钮点击来触发这些功能,该咋办呢? 例子: 先以tab为例上一个小例子: <!DOCTYPE ...

  2. js模拟键盘事件

    <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8& ...

  3. JavaScript 模拟键盘事件

    JavaScript 模拟键盘事件和鼠标事件(比如模拟按下回车等) 2016年09月08日 15:23:25 神秘_博士 阅读数:41158 标签: javascript鼠标键盘事件模拟更多 个人分类 ...

  4. selenium 模拟键盘事件 复制粘贴、右键、回车等

    #coding=utf-8 ''' selenium ''' from selenium import webdriver as wd import time bc=wd.Chrome(executa ...

  5. 使用jquery模拟键盘事件，但window系统并不会真的响应事件，只是浏览器当前页面会响应而已

    <!DOCTYPE html> <html> <head> <title>Demo</title> <meta http-equiv= ...

  6. js模拟触发事件

     html标签元素封装着实用的[事件],但在很多时候,需要[模拟触发事件],比如 [按钮单机事件]  可以实实在在点击按钮触发该事件,但体验而言,很多时候需要js逻辑处理让实现 触发事件的效果这时就用 ...

  7. [原创]Javascript 利用mousetrap.js进行键盘事件操作

    我们日常开发中,会遇到js的键盘操作,例如回车提交表单之类的.或者按下某个键执行某个方法.无意中发现一个大小不到4K的js文件,它非常方便的操作键盘事件. 自己也尝试了一下:具体代码如下: 详情可以去 ...

  8. js浏览器键盘事件控制(转自新浪微博)

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

  9. JS获取键盘事件

    <script type="text/javascript" language=JavaScript charset="UTF-8"> docume ...

随机推荐

  1. mysql自定义函数统计订单状态：GET_ORDER_STATUS()

    DELIMITER $$ USE `local_hnyz`$$ DROP FUNCTION IF EXISTS `GET_ORDER_STATUS`$$ CREATE DEFINER=`root`@` ...

  2. elastic search记录

    安装与启动 插件安装 中文分词器 https://github.com/medcl/elasticsearch-analysis-ik elastic api GET _search { " ...

  3. iOS渐变视图&动画库、腰杆、音频水滴水波手势、多种对话框、四级展开效果等源码

    iOS精选源码 用户行为追踪--无侵入埋点 .终端日志的打印 支持storyboard的渐变视图&动画库 支持圆形.竖直.横向的摇杆 纯swift实现的类似excel表格效果 swift实现自 ...

  4. css样式表---样式表分类、选择器

    一.样式表分三类: 1.内联样式表.——放在元素的开始标记中.——只对当前元素起作用.<input name="txt" style="border:0px; bo ...

  5. Qt 线程池QThreadPool类、QRunnable类

    QThreadPool类 用来管理 QThreads.此类中的所有函数都是线程安全的. 主要属性: 1.activeThreadCount: 此属性表示线程池中的活动线程数,通过activeThrea ...

  6. discussion|局限性|解释|猜测|前作与同行

    讨论是整篇论文的精华和灵魂,考查作者的文献积累量和对所研究内容的理解深度,作者需要阐述为什么结果是重要的,内容包括理论.应用.在其他其他领域的作用及应用,阐述时要求直接明确. 具体而言,首先概述最重要 ...

  7. 接口测试 requests的身份认证方式

    requests提供多种身份认证方式,包括基本身份认证.netrc 认证.摘要式身份认证.OAuth 1 认证.OAuth 2 与 OpenID 连接认证.自定义认证.这些认证方式的应用场景是什么呢? ...

  8. bootstrap实现多选项及回显

    1.前端 <link rel="stylesheet" href="${ctxStatic}/js/bootstrap-select-1.12.2/dist/css ...

  9. Java枚举的作用和用法

    从没有枚举的时代说起 在枚举出现之前,如果想要表示一组特定的离散值,往往使用一些常量.例如: [Java] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 ...

  10. JDK9新特性-改进进程管理 API

    Java 9 这个版本对进程管理方面的改进也是相当大的.在为数不多的几次 Java 项目中,有偶尔用到多线程,但对多进程和进程方面的了解还真是太少. 我想,大部分人应该跟我一样,在编程之外知道有进程的 ...