jQuery软键盘插件

1、html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery软键盘插件</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />

</head>
<body>
<div id="container" >
 <textarea id="write" rows="6" cols="60"></textarea>
 <div class="thumnail" style="background:red;width:24px;height:24px;cursor:pointer;"></div>
 <ul id="keyboard" style="display:none;">
 <li class="symbol">`~</li>
 <li class="symbol">1!</li>
 <li class="symbol">2@</li>
 <li class="symbol">3#</li>
 <li class="symbol">4$</li>
 <li class="symbol">5%</li>
 <li class="symbol">6^</li>
 <li class="symbol">7&</li>
 <li class="symbol">8*</li>
 <li class="symbol">9(</li>
 <li class="symbol">0)</li>
 <li class="symbol">-_</li>
 <li class="symbol">=+</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">[{</li>
 <li class="symbol">]}</li>
 <li class="symbol lastitem">\|</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">;:</li>
 <li class="symbol">'"</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">,<</li>
 <li class="symbol">.></li>
 <li class="symbol">/?</li>
 <li class="right-shift lastitem">shift</li>
 <li class="space lastitem"> </li>
 </ul>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/keyboard.js"></script>
</body>
<script type="text/javascript">
 $(function(){
 $(".thumnail").click(function(){
 $("#keyboard").css("display","block");
 });
 });
</script>
</html>

2、css：

* {
margin: 0;
padding: 0;
}
body {
font: 71%/1.5 Verdana, Sans-Serif;
background: #eee;
}
#container {
margin: 100px auto;
width: 688px;
}
#write {
margin: 0 0 5px;
padding: 5px;
width: 671px;
height: 200px;
font: 1em/1.5 Verdana, Sans-Serif;
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;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   }
       .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;
       }
       #keyboard li:hover {
       position: relative;
       top: 1px;
       left: 1px;
       border-color: #e5e5e5;
       cursor: pointer;
       }

3、js：keyboard.js

$(function(){
   var $write = $('#write'),
       shift = false,
       capslock = false;
   $('#keyboard li').click(function(){
       var $this = $(this),
           character = $this.html(); // If it's a lowercase letter, nothing happens to this variable

       // Shift keys
       if ($this.hasClass('left-shift') || $this.hasClass('right-shift')) {
           $('.letter').toggleClass('uppercase');
           $('.symbol span').toggle();

           shift = (shift === true) ? false : true;
           capslock = false;
           return false;
       }

       // Caps lock
       if ($this.hasClass('capslock')) {
           $('.letter').toggleClass('uppercase');
           capslock = true;
           return false;
       }

       // Delete
       if ($this.hasClass('delete')) {
           var html = $write.html();

           $write.html(html.substr(0, html.length - 1));
           return false;
       }

       // Special characters
       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";

       // Uppercase letter
       if ($this.hasClass('uppercase')) character = character.toUpperCase();

       // Remove shift once a key is clicked.
       if (shift === true) {
           $('.symbol span').toggle();
           if (capslock === false) $('.letter').toggleClass('uppercase');

           shift = false;
       }

       // Add the character
       $write.html($write.html() + character);
   });
});

jQuery软键盘插件的更多相关文章

基于jQuery的软键盘
基于jQuery的软键盘前些天写了一个基于基于jQuery的数字键盘,今天给大家带来一个基于jQuery的全字母键盘插件(支持全字母大小写切换,数字输入,退格清除,关闭功能,可调整大小和键盘位置 ...
基于jQuery的数字键盘插件
有时,我们需要在网页上使用软键盘.今天,就给大家带来一个基于jQuery的数字键盘插件,除了jQuery,不需要依赖任何文件资源.纯数字键盘,有退格,有清除,不支持输入小数(需要的可以自己改一下,主要 ...
禁止移动端input弹出软键盘
在做三级联动,或者一些时间插件的时候总是弹出软键盘,用下面的方法就可以禁用掉,废话不多说直接上代码. HTML代码 <div class=""> <div> ...
FlexSlider jQuery滑动切换插件参数
demo:http://www.sucaihuo.com/jquery/0/6/demo/ FlexSlider是一个非常出色的jQuery滑动切换插件,它支持所有主流浏览器,并有淡入淡出效果.适合所 ...
ZOOM - 简单易用的 jQuery 照片相册插件
jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的图片切换效果.ZOOM 是一款全屏效果的 jQuery 图片切换展示插件,支持键盘前后按键切换,支持 ...
分享22款响应式的 jQuery 图片滑块插件
响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助 ...
20款美化网站的 jQuery Lightbox 灯箱插件
jQuery Lightbox 灯箱插件可以让你为您的网站和应用程序展示优雅的图像,视频和其它内容(使用模式窗口).如果你是一个开发人员,你必须拥有 jQuery 灯箱插件集合,因为有一部分的客户会 ...
【精心挑选】15款最好的 jQuery 网格布局插件（Grid Plugins）
如今,大多数网站设计要靠网格系统和布局,这能够提供给设计人员一个方便的途径来组织网页上的内容.网格的设计最常见于报纸和杂志的版面,由文字和图像构成的列组成. 这篇文章给大家分享精心挑选的15款最佳的 ...
jQuery上传插件,文件上传测试用例
jQuery上传插件,文件上传测试用例 jQuery File Upload-jQuery上传插件介绍http://www.jq22.com/jquery-info230 jQuery File Up ...

随机推荐

ZOJ 3939The Lucky Week<模拟/暴力>
题意:我们认为日期的天数为1,11,21,并且是周一的为Lucky Week;现在给出第一个lucky week的日期,求第N个的lucky week: //1:四百年一轮回,从闰年和平年的判定可以推 ...
USACO Section 1.2 Name That Number 解题报告
题目题目描述在一个农场里面,每一头牛都有一个数字编号,但是现在这些牛不喜欢这种编号,它们想把这些数字编号转化成为可以接受的字母的形式.数字与字母的转换表如下: 2: A,B,C 5: J,K,L ...
input file图片上传预览
两种方法,方法一: js代码: //头像上传预览 $("#up").change(function() { var $file = $(this); var fileObj = $ ...
javascript 实现加法分离。 plus(3)(4); // => 得到 7
原文地址:http://cnodejs.org/topic/5230d5f0101e574521c86ff4 JavaScript 的设计是典型的函数式的编程范式匿名函数 JSON数据本身就是字符串, ...
octave之奇巧淫技向量化计算实现寻找样本点所属聚类下标
前面有文章提到过,K-means算法,第一步骤是找出样本点的的所属聚类.下面用两种方式实现,一种是普通的循环,一种是完全向量化计算. 假设 : X 是m×n样本矩阵,其每一行是一个样本,m表示样本数目 ...
在Action类中获得HttpServletResponse对象的四种方法
在struts1.xAction类的execute方法中,有四个参数,其中两个就是response和request.而在Struts2中,并没有任何参数,因此,就不能简单地从execute方法获得Ht ...
怎样判断iOS App是通过哪种途径启动的？
http://www.cnblogs.com/daguo/p/3759514.html - (BOOL)application:(UIApplication *)application didFini ...
bzoj-3450 Easy概率DP 【数学期望】
Description 某一天WJMZBMR在打osu~~~但是他太弱逼了,有些地方完全靠运气:(我们来简化一下这个游戏的规则有n次点击要做,成功了就是o,失败了就是x,分数是按comb计算的,连续a ...
java实现FFT变换（转）
源:java实现FFT变换 /************************************************************************* * Compilati ...
Delphi 内存与指针
源:Delphi 内存与指针 Delphi 的内存操作函数(1): 给字符指针分配内存 Delphi 的内存操作函数(2): 给数组指针分配内存 Delphi 的内存操作函数(3): 给结构体指针分配 ...

jQuery软键盘插件

jQuery软键盘插件的更多相关文章

随机推荐

热门专题