js 小鍵盤需求

/* container */
    #container {
        margin: 100px auto;
        width: 488px;
    }

    #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;
        cursor: pointer;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        font-size: 20px;
    }
    
        #keyboard li:hover {
            position: relative;
            top: 1px;
            left: 1px;
            border-color: #e5e5e5;
            background: #FFF1C2;
        }
    
    #keyboard .delete {
        width: 180px;
        font-size: 20px;

js代碼

 $(function () {
        $("#Batchid").bind('focus', function () {           
            //鍵盤顯示
            $("#container").show();
        });
        //點(diǎn)擊
        $(".letter").bind('click', function () {
            $("#Batchid").val($("#Batchid").val() + "" + $(this).html());
        });
        //刪除
        $("#delete").bind('click', function () {
            var html = $("#Batchid").val()

            $("#Batchid").val(html.substr(0, html.length - 1));
        });
        
    });

頁面代碼

 <div >
            <div id="contact-form">
                <table >
                    <tr>
                        <td>
                            <h3>商品碼:</h3>
                        </td>
                        <td>
                            <input id="Ptraceid" class="easyui-textbox"  onfocus="">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <h4>批&nbsp;&nbsp;&nbsp;&nbsp;號(hào):</h4>
                        </td>
                        <td>
                            <input id="Batchid" class="easyui-textbox" >

                        </td>
                    </tr>
                </table>
            </div>
            <div >
                <input id="ok" class="easyui-linkbutton" type="button" onclick="Bsearch('@Url.Action("WebPhoneDetails")')" value="查  詢">
            </div>
        </div>

        <div id="container" >
            <ul id="keyboard">
                <li class="letter">1</li>
                <li class="letter">2</li>
                <li class="letter">3</li>
                <li class="letter">4</li>
                <li class="letter">5</li>
                <li class="letter">6</li>
                <li class="letter">7</li>
                <li class="letter">8</li>
                <li class="letter">9</li>
                <li class="letter">0</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="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="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 id="delete" class="delete">刪除</li>
            </ul>
        </div>

最后效果 搞了兩個(gè)多小時(shí)