初识 jquery.simulate.js 模拟键盘事件

用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 模拟键盘事件相关推荐

【键盘】jQuery+CSS3模拟键盘事件（精）
jQuery+CSS3模拟键盘事件是一款基于jQuery的模拟键盘事件的应用,键盘上除了功能键,其他键都可以用这款插件来模拟.当你敲击键盘上的键时,这款应用会帮助你获取到这个键的事件,并在页面上的模拟 ...
php接收键盘事件,js获取键盘事件的方法实例
本文主要和大家分享js获取键盘事件的方法实例,希望能帮助到大家. document.οnkeydοwn=function(event){ var e = event || window.event | ...
selenium 模拟键盘事件复制粘贴、右键、回车等
[selenium 模拟键盘事件复制粘贴.右键.回车等] #coding=utf-8 ''' selenium ''' from selenium import webdriver as wd im ...
web自动化测试第7步：模拟键盘事件（Keys）
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/CCGGAAG/article/deta ...
Android电子牌外接USB读卡器读取内容模拟键盘事件
最近做了一个Android外接USB读卡器刷手环读取数据,模拟键盘输入事件的项目; 借鉴了https://github.com/githubRonda/BarcodeScanner 连接电子牌板子调试 ...
使用JS模拟键盘、鼠标操作
//只在chrome测试过,大部分应用场景在webkit,所以不做其他兼容// 模拟键盘输入 window.inputValue = function (dom, st) {var evt = new ...
Web自动化测试：模拟键盘事件（Keys）
如何使用引入的common.keys库来模拟键盘来操控浏览器一.基础写法具体用法其实和我们之前对浏览器输入框所用的方法:send_keys()是一样的,只不过我们通过keys类,可以输入webdr ...
selenium模拟键盘事件(回车、删除、刷新等)
需要引入keys from selenium.webdriver.common.keys import Keys sendkeys可以模拟键盘输入和键盘上的按键: send_keys(Keys.BAC ...
vue封装的全屏js 禁止键盘事件获取当前浏览器类型获取当前的屏幕宽高
开启全屏 export function fullScreen(){var el = document.documentElement,rfs = el.requestFullScreen || el ...

初识 jquery.simulate.js 模拟键盘事件

初识 jquery.simulate.js 模拟键盘事件相关推荐

最新文章

热门文章