软键盘实现

 function posCursor() {
            var s = document.selection.createRange();
            if (event.srcElement.value.length!=null) {
                s.moveStart("character", -event.srcElement.value.length);
                $("#end").val(s.text.length);
            } else {
                $("#end").val(0);
            }
        }
$(function () {
            shift = false, capslock = false;
            //var $write = inputElement;
            // Download by http://www.codefans.net
            $('#keyboard li').click(function () {
                var $write = inputElement;
                var $this = $(this),
                 character = $this.html(); // If it's a lowercase letter, nothing happens to this variable
                if (sele) {
                    $write.val('');
                    sele = false;
                }
                //nothave
                if ($this.hasClass('nothave')) {
                    return;
                }
                // 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('del')) {
                    var html = $write.val();
                    var end = $("#end").val();
                    var last = Number(end)-1;
                    // alert(last);
                    var arr = html.split("");
                    var rp = "";
                    for (var i = 0; i < arr.length; i++) {
                        if (i == last) {
                            rp = arr[i + 1];
                        }
                        if ($write.val() != "") {
                            if (Number(end) == 0) {
                                rp = arr[0];
                            }
                        }
                    }
                    html = html.replace(rp, "");
                    $write.val(html);
                    return false;
                }
                if ($this.hasClass('delete')) {
                    $write.focus();
                    var html = $write.val();

                    $write.val(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')) {
                    if ($(inputElement).attr("id") == "txtUserID")
                    { character = $("#txtPwd").focus(); return; }
                    else { character = $("#txtUserID").focus(); return; }
                }
                if ($this.hasClass('return')) { character = ""; $("#btnOk").click(); return; };

                // 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.focus();
                $write.val($write.val() + character);

            });
        });
function keyFocus() {

            inputElement = $("#txtUserID");
            posCursor();
        }
        function keyFocus1() {
            inputElement = $("#txtPwd");
            posCursor();
        }
 function sel() {
            sele = true;
                  }

 

 

<input type="hidden" id="end" />

 

<input type="text" name="txtUserID"  id="txtUserID" onfocus="keyFocus();" onmouseup="posCursor()" onselect="sel()"  class="inpClass" />
<input type="text" name="txtPwd"  id="txtPwd" onfocus="keyFocus1();" onmouseup="posCursor()" onselect="sel()"  class="inpClass" />

*
{
    margin: 0;
    padding: 0;
}
body
{
    font: 71%/1.5 Verdana, Sans-Serif;
    background: #eee;
}
#container
{
    margin: 1px auto;
    width: 818px;
    height:338px;
    background-color:transparent;
}
#keyboard
{
    margin: 0;
    padding-left: 5px;
    padding-top: 5px;
    list-style: none;
}
#keyboard li
{
    float: left;
    margin: 0 7px 7px 0;
    width: 48px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    
    background-color:transparent;
    border:none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px; 
    font-size: 14px;
    background-image: url(../images/gymsignin/数字键和字母.gif);
}
.capslock, .tab, .left-shift
{
    clear: left;
}
#keyboard .tab, #keyboard .delete
{
    
}
#keyboard .capslock
{
    
}
#keyboard .return
{
   
}
#keyboard .left-shift
{
    
}
#keyboard .right-shift
{
    
}
.lastitem
{
    margin-right: 0;
}
.uppercase
{
    text-transform: uppercase;
}
#keyboard .space
{
    
}
.on
{
    display: none;
}
#keyboard li:hover
{
    position: relative;
    top: 1px;
    left: 1px;
    cursor: pointer;
}

<div id="container" align="center" style="background-image: url(键盘背景.png); " >
            <ul id="keyboard" >
                <li class="nothave" style="width: 48px; height:32px; margin-top:12px; line-height: 32px;background-image: url(../images/gymsignin/esc1.gif);  margin-left:8px; ">Esc</li>
                <li class="nothave" style="width: 48px; height:32px; margin-top:12px; line-height: 32px;background-image: url(../images/gymsignin/esc1.gif);">F1</li>
                <li class="nothave" style="width: 48px; height:32px; margin-top:12px; line-height: 32px;background-image: url(../images/gymsignin/esc1.gif);">F2</li>
                <li class="nothave" style="width: 48px; height:32px; margin-top:12px; line-height: 32px;background-image: url(../images/gymsignin/esc1.gif);">F3</li>
                <li class="nothave" style="width: 48px; height:32px; margin-top:12px; line-height: 32px;background-image: url(../images/gymsignin/esc1.gif);">F4</li>
                <li class="nothave" style="width: 48px; height:32px; margin-top:12px; line-height: 32px;background-image: url(../images/gymsignin/esc1.gif);">F5</li>
                <li class="nothave" style="width: 48px; height:32px; margin-top:12px; line-height: 32px;background-image: url(../images/gymsignin/esc1.gif);">F6</li>
                <li class="nothave" style="width: 48px; height:32px; margin-top:12px; line-height: 32px;background-image: url(../images/gymsignin/esc1.gif);">F7</li>
                <li class="nothave" style="width: 48px; height:32px; margin-top:12px; line-height: 32px;background-image: url(../images/gymsignin/esc1.gif);">F8</li>
                <li class="nothave" style="width: 48px; height:32px; margin-top:12px; line-height: 32px;background-image: url(../images/gymsignin/esc1.gif);">F9</li>
                <li class="nothave" style="width: 48px; height:32px; margin-top:12px; line-height: 32px;background-image: url(../images/gymsignin/esc1.gif);">F10</li>
                <li class="nothave" style="width: 48px; height:32px; margin-top:12px; line-height: 32px;background-image: url(../images/gymsignin/esc1.gif);">F11</li>
                <li class="nothave" style="width: 48px; height:32px; margin-top:12px; line-height: 32px;background-image: url(../images/gymsignin/esc1.gif);">F12</li>
                <li class="del" style="width:79px; height:32px; margin-top:12px;line-height: 32px;background-image: url(../images/gymsignin/delete6.gif);">Del</li>
                <li class="symbol" style="margin-left:8px;"><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">&</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" style="width:79px;background-image: url(../images/gymsignin/backspace1.gif);">←</li>
                <li class="tab" style="width:78px;margin-left:8px;background-image: url(../images/gymsignin/tab1.gif);">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 style="width: 87px;margin-left:9px;background-image: url(../images/gymsignin/capslock1.gif);" class="capslock">Caps </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 style="width: 93px;background-image: url(../images/gymsignin/回车1.gif);"  class="return lastitem">Enter</li>
                <li style="width: 118px;margin-left:8px;background-image: url(../images/gymsignin/shift1.gif);" 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 style="width: 118px;background-image: url(../images/gymsignin/shift1.gif);" class="right-shift lastitem">Shift</li>
                <li style="width: 65px;margin-left:8px;background-image: url(../images/gymsignin/ctrl1.gif);" class="nothave">Ctrl</li>
                <li style="width: 48px;background-image: url(../images/gymsignin/数字键和字母1.gif);" class="nothave"></li>
                <li style="width: 48px;background-image: url(../images/gymsignin/数字键和字母1.gif);" class="nothave">Alt</li>
                <li style="width: 269px;background-image: url(../images/gymsignin/空格和方向键5.png);" class="space lastitem">&nbsp;</li>
                <li style="width: 48px;background-image: url(../images/gymsignin/数字键和字母1.gif);" class="nothave">Alt</li>
                <li style="width: 48px;background-image: url(../images/gymsignin/数字键和字母1.gif);" class="nothave"></li>
                <li style="width: 48px;background-image: url(../images/gymsignin/数字键和字母1.gif);" class="nothave">Ctrl</li>
                <li style="width: 48px;height: 21px;margin-top:26px;background-image: url(../images/gymsignin/方向键向左.png);" class="nothave"></li>
                 <li style="width: 48px;height: 21px;background-image: url(../images/gymsignin/方向键向上.png);" class="nothave"></li>
                  <li style="width: 48px;height: 21px;background-image: url(../images/gymsignin/方向键向下.png);position: absolute; left: 691px; top: 302px;" class="nothave"></li>
                   <li style="width: 48px;height: 21px;margin-top:26px;background-image: url(../images/gymsignin/方向键向右.png);" class="nothave"></li>
            </ul>
        </div>