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

随机推荐

ms08_067利用过程
进入msf. show exploits. use exploit/windows/smb/ms08_067_netapi. show playloads. set PLAYLOAD windows/ ...
Hadoop 文本分类终于跑通了
Training 入口 package org.wordCount; import java.util.ArrayList; import java.util.List; import org.apa ...
cc2530 寄存器PICTL理解
vi 编辑器跳转到指定行数
如:跳转到25行 :set number :23
一个门外汉的理解 ~ Faster R-CNN
首先放R-CNN的原理图显然R-CNN的整过过程大致上划分为四步: 1.输入图片 2.生成候选窗口 3.对局部窗口进行特征提取(CNN) 4.分类(Classify regions) 而R-CNN的 ...
HDU 5171 GTY's birthday gift 矩阵快速幂
GTY's birthday gift Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Othe ...
openstack controller ha测试环境搭建记录（六）——配置keystone
在所有节点的hosts文件添加:10.0.0.10 myvip 在所有节点安装# yum install -y openstack-keystone python-keystoneclient# yu ...
DNS架设准备+申请领域查询授权
1. 架设DNS服务器首先我们得安装一下的软件[root@bogon ~]# rpm -qa | grep ^bindbind-libs-9.8.2-0.37.rc1.el6.i686 <==给 ...
MODBUS协议详解
MODBUS是一个工业上通信常用的通讯协议,一般在PLC上面用的比较多,主要是定义了一种数据传输的规范,比如数据发给谁,数据是干嘛的,数据错没错,接收到数据的从机告诉我数据有没有接受到等. 传输的方式 ...
linux 驱动入门6
看/sys目录经常看到bus device driver class. 这也是网上大量说的驱动驱动模型.这些的关系得熟悉得明白吧.是的.今天我先不整他们的关系.先逐个击破,然后再统一来理清楚他们之间的 ...

jQuery软键盘插件

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

随机推荐

热门专题