zoukankan      html  css  js  c++  java
  • 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;24px;height:24px;cursor:pointer;"></div>
        <ul id="keyboard" style="display:none;">
            <li class="symbol"><span class="off">`</span><span class="on">~</span></li>
            <li class="symbol"><span class="off">1</span><span class="on">!</span></li>
            <li class="symbol"><span class="off">2</span><span class="on">@</span></li>
            <li class="symbol"><span class="off">3</span><span class="on">#</span></li>
            <li class="symbol"><span class="off">4</span><span class="on">$</span></li>
            <li class="symbol"><span class="off">5</span><span class="on">%</span></li>
            <li class="symbol"><span class="off">6</span><span class="on">^</span></li>
            <li class="symbol"><span class="off">7</span><span class="on">&amp;</span></li>
            <li class="symbol"><span class="off">8</span><span class="on">*</span></li>
            <li class="symbol"><span class="off">9</span><span class="on">(</span></li>
            <li class="symbol"><span class="off">0</span><span class="on">)</span></li>
            <li class="symbol"><span class="off">-</span><span class="on">_</span></li>
            <li class="symbol"><span class="off">=</span><span class="on">+</span></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"><span class="off">[</span><span class="on">{</span></li>
            <li class="symbol"><span class="off">]</span><span class="on">}</span></li>
            <li class="symbol lastitem"><span class="off"></span><span class="on">|</span></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"><span class="off">;</span><span class="on">:</span></li>
            <li class="symbol"><span class="off">'</span><span class="on">&quot;</span></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"><span class="off">,</span><span class="on">&lt;</span></li>
            <li class="symbol"><span class="off">.</span><span class="on">&gt;</span></li>
            <li class="symbol"><span class="off">/</span><span class="on">?</span></li>
            <li class="right-shift lastitem">shift</li>
            <li class="space lastitem">&nbsp;</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;
    688px;
    }
    #write {
    margin: 0 0 5px;
    padding: 5px;
    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;
         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 {
                 70px;
                }
                #keyboard .capslock {
                 80px;
                }
                #keyboard .return {
                 77px;
                }
                #keyboard .left-shift {
                 95px;
                }
                #keyboard .right-shift {
                 109px;
                }
            .lastitem {
            margin-right: 0;
            }
            .uppercase {
            text-transform: uppercase;
            }
            #keyboard .space {
            clear: left;
             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 = " ";
            if ($this.hasClass('return')) character = " ";
            
            // 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);
        });
    });

  • 相关阅读:
    【HTML5 绘图与动画】使用canvas
    【H5新增元素和文档结构】新的全局属性 1. contentEditable 可编辑内容 2. contextmenu 快捷菜单 3. data 自定义属性 4. draggable 可拖动 5. dropzone 拖动数据 6. hidden 隐藏 7. spellcheck 语法检查 8. translate 可翻译
    【H5新增元素和文档结构】完善旧元素 1. a 超链接 2. ol 有序列表 3. dl 定义列表 4. cite 引用文本 5. small 小号字体 6. iframe 浮动框架 7. script 脚本
    【H5新增元素和文档结构】新的语义信息 1. address 2. time 3. figure 跟 figcaption 4. details 和 summary 5. mark 6. progress 7. meter 8. dialog 9.bdi 10. wbr 11. ruby、rt、rp 12. command
    【H5新增元素跟文档结构】新的文档结构 1. article 文章块 2. section 区块 3. nav 导航条 4. aside 辅助栏 5. main 主要区域 6. header 标题栏 7. hgroup 标题组 8. footer 页脚栏
    5_PHP数组_3_数组处理函数及其应用_9_数组集合运算函数
    【华为云技术分享】鲲鹏弹性云服务器GCC交叉编译环境搭建指南
    【华为云技术分享】7 分钟全面了解位运算
    【华为云技术分享】Linux内核编程环境 (1)
    【华为云技术分享】华为云MySQL 8.0正式商用,全新增强版开源利器强势来袭
  • 原文地址:https://www.cnblogs.com/koleyang/p/4815718.html
Copyright © 2011-2022 走看看