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

随机推荐

块和内嵌总结，以及各个标签的应用。其中的ul ol dl特殊定义为auto，使得里面的内容展开
<!doctype html> <html> <head> <meta charset="UTF-8"/> <title> ...
ExtJS的4.1新特性简要介绍
ExtJS的4.1新特性简要介绍一.动态加载机制 Ext.require动态加载任何类,并且会加载依赖类: 二.新类系统 •类定义:ExtJS4.0以后应入了Ext.define方法,他通过类的字符 ...
python数组查找算法---bisect二分查找插入
1 实例这个模块只有几个函数, 一旦决定使用二分搜索时,立马要想到使用这个模块 [python] view plaincopyprint? import bisect L = [1,3,3,6,8, ...
Android——apk反编译
一.工具准备: 1.dex2jar:http://code.google.com/p/dex2jar/downloads/list 2.JD-GUI:windows:http://laichao.go ...
DataTable的名称要后设置
string sqldatabase = string.Format(dr["sql"].ToString(), drpat["PATIENT_ID"].ToS ...
卷积神经网络在tenserflow的实现
卷积神经网络的理论基础看这篇:http://blog.csdn.net/stdcoutzyx/article/details/41596663/ 卷积神经网络的tenserflow教程看这里:http ...
全球主流8位MCU芯片详细解剖No.2:英飞凌 XC866 - 全文
[导读] XC866是新型8位微控制器系列(XC800)的第一代系列产品,集成高性能8051核.片内FLASH及功能强大的外设集.此外,XC800系列产品内部集成的片内振荡器和支持3.3V或5.0V ...
<Natural Language Processing with Python>学习笔记二
用Enthought Canopy作图果然方便.昨天频频出现无法识别pylab模块的异常,今天终于搞好了.以下是今天出来的图:
C#设计模式(6)——原型模式
一.概念二.模型三.代码实现 ///火影忍者中鸣人的影分身和孙悟空的的变都是原型模式 class Client { static void Main(string[] args) { // 孙悟空 ...
mongodb 3.x connect with credential
package mongoDb; import java.net.UnknownHostException; import java.util.ArrayList; import java.util. ...

jQuery软键盘插件

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

随机推荐

热门专题