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

随机推荐

母亲的牛奶(milk)
母亲的牛奶(milk) 题目描述农民约翰有三个容量分别是A.B.C升的桶,A.B.C分别是三个从1到20的整数,最初,A和B桶都是空的,而C桶是装满牛奶的.有时,约翰把牛奶从一个桶倒到另一个桶中,直 ...
我的第一个Android项目之环境搭建
开发IDE Android Studio2.0 + Genymotion + JDK1.8 网盘地址:http://pan.baidu.com/s/1kUSVqaN Android Studio 我的 ...
Eclipse使用的小细节归档
1. 控制台打印出来的语句不限制条数:Preference-> Run/Debug -> Control -> Limit Console Output 2.
kindeditor集成ckplayer(带右键编辑菜单)
相信好多朋友为开源web编辑器没有集成视频播放器而烦恼,于是我就是试着修改了一下kindeditor,其实ueditor应该也是同样的,好了不多说了直接上图吧 kindeditor版本: 4.1.7 ...
计算机学院大学生程序设计竞赛（2015’12） 1003 The collector’s puzzle
#include<cstdio> #include<algorithm> using namespace std; using namespace std; +; int a[ ...
iOS中利用UISearchBar实现搜索
先把源码贴出来 https://github.com/losedMemory/ZSSearchBar 这是我在github上写的一个Demo,大家可以看看在大多数app中都会用到搜索功能,那么搜 ...
Hibernate-----关系映射重点!!!
1. 关系, 指的是对象之间的关系, 并不是数据库之间的关系. 2. 简化问题: a) 怎么写annotation b) 增删改查CRUD怎么写对象处于下列关系之一 (一对一, 一对多, 多对多)时 ...
SecureCRT上传bash: rz: command not found
SecureCRT上传bash: rz: command not found -bash: rz: command not found rz命令没找到? 执行sz,同样也没找到. 安装lrzs ...
PHP 判断几秒前，几分钟，几小时前
PHP 对于时间的过了多久的判断,几秒前,几分钟前,几小时前,$time = strtotime("2017-01-15 14:42:00"); $time = strtotime ...
Ubuntu 12.04下PHP环境的搭建(LAMP)
1.首先打开命令行,切换到root身份,获得最新的软件包 su root sudo apt-get install update 2.安装MySQL数据库 sudo apt-get install m ...

jQuery软键盘插件

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

随机推荐

热门专题