js+JQuery模拟键盘输入

CSS样式：

@charset "utf-8";
*{margin:0;padding:0;font-family: 'Microsoft Yahei';}
body{background:#eee; font-size: 16px;}
/* container */
#container{margin:100px auto;width:688px;}
#write{margin:0 0 5px;padding:5px;width:671px;height:200px;font-size: 16px; background:#fff;border:1px solid #f9f9f9;-moz-border-radius:5px;-webkit-border-radius:5px;}
#keyboard{margin:0;padding:0;list-style:none;}
#keyboard li{float:left;margin:0 5px 5px 0;width:40px;height:40px;line-height:40px;text-align:center;background:#fff;border:1px solid #f9f9f9;cursor:pointer;-moz-border-radius:5px;-webkit-border-radius:5px;}
#keyboard li:hover{position:relative;top:1px;left:1px;border-color:#e5e5e5;background:#FFF1C2;}
.capslock, .tab,.left-shift{clear:left;}
#keyboard .tab, #keyboard .delete{width:70px;}
#keyboard .capslock{width:80px;}
#keyboard .return{width:77px;}
#keyboard .left-shift{width:95px;}
#keyboard .right-shift{width:109px;}
.lastitem{margin-right:0;}
.uppercase{text-transform:uppercase;}
#keyboard .space{clear:left;width:681px;}
.on{display:none;}

html

<div id="container"><textarea id="write" rows="6" cols="60"></textarea><ul id="keyboard"><li class="symbol"><span class="off">`</span><span class="on">~</span></li><li class="symbol"><span class="off">1</span><span class="on">!</span></li><li class="symbol"><span class="off">2</span><span class="on">@</span></li><li class="symbol"><span class="off">3</span><span class="on">#</span></li><li class="symbol"><span class="off">4</span><span class="on">$</span></li><li class="symbol"><span class="off">5</span><span class="on">%</span></li><li class="symbol"><span class="off">6</span><span class="on">^</span></li><li class="symbol"><span class="off">7</span><span class="on">&amp;</span></li><li class="symbol"><span class="off">8</span><span class="on">*</span></li><li class="symbol"><span class="off">9</span><span class="on">(</span></li><li class="symbol"><span class="off">0</span><span class="on">)</span></li><li class="symbol"><span class="off">-</span><span class="on">_</span></li><li class="symbol"><span class="off">=</span><span class="on">+</span></li><li class="delete lastitem">delete</li><li class="tab">tab</li><li class="letter">q</li><li class="letter">w</li><li class="letter">e</li><li class="letter">r</li><li class="letter">t</li><li class="letter">y</li><li class="letter">u</li><li class="letter">i</li><li class="letter">o</li><li class="letter">p</li><li class="symbol"><span class="off">[</span><span class="on">{</span></li><li class="symbol"><span class="off">]</span><span class="on">}</span></li><li class="symbol lastitem"><span class="off">\</span><span class="on">|</span></li><li class="capslock">caps lock</li><li class="letter">a</li><li class="letter">s</li><li class="letter">d</li><li class="letter">f</li><li class="letter">g</li><li class="letter">h</li><li class="letter">j</li><li class="letter">k</li><li class="letter">l</li><li class="symbol"><span class="off">;</span><span class="on">:</span></li><li class="symbol"><span class="off">'</span><span class="on">&quot;</span></li><li class="return lastitem">return</li><li class="left-shift">shift</li><li class="letter">z</li><li class="letter">x</li><li class="letter">c</li><li class="letter">v</li><li class="letter">b</li><li class="letter">n</li><li class="letter">m</li><li class="symbol"><span class="off">,</span><span class="on">&lt;</span></li><li class="symbol"><span class="off">.</span><span class="on">&gt;</span></li><li class="symbol"><span class="off">/</span><span class="on">?</span></li><li class="right-shift lastitem">shift</li><li class="space lastitem">&nbsp;</li></ul>
</div>

功能实现

<script type="text/javascript">$(function() {var $write = $("#write"),shift = false,capslock = false;$("li").on("click",function() {var $this = $(this),character = $this.html(); // Shift 转移if ($this.hasClass("left-shift") || $this.hasClass("right-shift")) {$(".letter").toggleClass("uppercase");$(".symbol span").toggle();shift = (shift === true) ? false : true;capslock = false;return false;}// 判断 大小写if ($this.hasClass("capslock")) {$(".letter").toggleClass("uppercase");capslock = true;return false;}// 删除文本if ($this.hasClass("delete")) {var html = $write.html();$write.html(html.substr(0, html.length - 1));return false;}// 特殊字符if ($this.hasClass("symbol")){character = $("span:visible", $this).html();} if ($this.hasClass("space")){character = " ";} if ($this.hasClass("tab")){character = "\t";} if ($this.hasClass("return")){character = "\n";}
// 大写if ($this.hasClass("uppercase")) character = character.toUpperCase();$write.html($write.html() + character);});
});

效果

js+JQuery模拟键盘输入相关推荐

java中像scanf一样多个输入_VB模拟键盘输入的N种方法
VB模拟键盘输入的N种方法http://bbs.csdn.net/topics/90509805hd378发表于: 2006-12-24 14:35:39用VB模拟键盘事件的N种方法键盘是我们使用计 ...
JavaScript - 模拟键盘输入支付密码
JavaScript - 模拟键盘输入支付密码 Max.Bai 2016-12-29 0x00: 发生了什么事我做自动化测试的时候,需要自动化在页面上输入这个密码,什么样子的,看下面: 有没有很像支 ...
python模拟键盘输入字符_Python | 根据关键字符串遍历窗口模拟键盘输入操作
在自动化脚本测试某个程序的过程中,偶尔会因为文件读取操作弹出各种信息窗口,导致自动化脚本无法继续往下执行.为了解决这个问题,需要隔一段时间对信息窗口进行一次遍历,针对需要处理的窗口进行模拟键盘输入操作 ...
python 模拟键盘_Python 模拟键盘输入 | 学步园
Python 模拟键盘输入,留着备用. #coding=utf-8 import win32gui,win32api,win32con import time import threading def ...
模拟键盘输入的keycode
今天有个弹出框的element一直找不到,换了种方法关掉,就是用模拟键盘输入,找到以下对应的keycode,先记录下来,说不定以后用得上/*--------------------edit by 20 ...
php虚拟键盘输入,[问题] bash下如何模拟键盘输入
你的位置: 问答吧 -> Shell -> 问题详情 [问题] bash下如何模拟键盘输入我想要在bash下模拟键盘输入. 现在有两个实例. 1. 如果我在使用未配置sudo nopas ...
python3模拟键盘输入_Python模拟键盘输入
使用pynput库达到模拟键盘输入的目的(也可以进行鼠标模拟). 1.安装pynput库 pip install pynput 2.引入键盘所需类 from pynput.keyboard impor ...
python如何模拟键盘输入_python 模拟键盘输入
python 模拟键盘输入一.PyUserInput安装 python3.5的PyMouse和PyKeyboard模块都集成到了PyUserInput模块中.在python3.5中,直接安装PyUs ...
vc++6.0 模拟鼠标点击代码木马程序的编写 VC 模拟键盘输入
From: http://fengqing888.blog.163.com/blog/static/33011416201112124481/ MFC 工程把以下代码放到你想要响应的函数里面就行 C ...

js+JQuery模拟键盘输入

CSS样式：

html

功能实现

效果

js+JQuery模拟键盘输入相关推荐

最新文章

热门文章