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 ...

随机推荐

android Spinner 续
android Spinner 续动态增删Spinner中的数据项 public class EX04_09 extends Activity{ private static final Stri ...
java程序中抛出异常的两种方式，及异常抛出的顺序
在java中,会经常遇到异常,java提供了两种抛出异常的方式. 方式一: throws ,抛出具体代码中的异常,这种方式编译器都会提示,举例: public static void main(Str ...
sqlite manager
http://www.isummation.com/blog/how-to-use-sqlite-manager-extension-in-firefox/ 工具条上右键选定制
HDU 1068 Girls and Boys 二分图最大独立集（最大二分匹配）
Girls and Boys Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
The Willpower Instinct
https://book.douban.com/subject/7043452/ 1.冥想2.健康饮食(低GI.素食为主,未加工食物为主).低GI食物使血糖稳定(蛋白.麦片.粗纤谷类.豆类.水果蔬菜) ...
angular change the url , prevent reloading
http://stackoverflow.com/questions/14974271/can-you-change-a-path-without-reloading-the-controller-i ...
java工程师联通XX面试题目
什么是“长连接”和“短连接”? 所谓短连接指建立SOCKET连接后发送后接收完数据后马上断开连接,一般银行都使用短连接解释2长连接就是指在基于tcp的通讯中,一直保持连接,不管当前是否发送或者接收数据 ...
android 点滴记录
1.AndroidM环境下,在framework层添加代码会对jar包的package name进行检查,并提示”unknown package name of class file”怎么解决? 产生 ...
[转]SQL Server® 2008 R2 Express 静默安装
1. http://msdn.itellyou.cn/下载Express版SQL Server 2.快捷键win+R,进入CMD,解压文件,解压命令为 <文件名>.exe /x <解 ...
关于IP选项
源:关于IP选项校验和算法

jQuery软键盘插件

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

随机推荐

热门专题