js 小键盘需求

标签：.net 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();
        });
        //点击
        $(".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 style="margin-left:-30px;">
            <div id="contact-form">
                <table style="text-align:center;margin:0 auto;">
                    <tr>
                        <td>
                            <h2>商品码:</h2>
                        </td>
                        <td>
                            <input id="Ptraceid" class="easyui-textbox" style="width:300px;height:32px;margin-top:90px;font-size:25px;border-radius: 4px;" onfocus="">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <h3>批&nbsp;&nbsp;&nbsp;&nbsp;号:</h3>
                        </td>
                        <td>
                            <input id="Batchid" class="easyui-textbox" style="width:300px;height:32px;margin-top:40px;font-size:25px;border-radius: 4px;">

                        </td>
                    </tr>
                </table>
            </div>
            <div style="text-align:center">
                <input id="ok" class="easyui-linkbutton" type="button" onclick="Bsearch(‘@Url.Action("WebPhoneDetails")‘)" value="查  询">
            </div>
        </div>

        <div id="container" style="margin-top:10px;display:none">
            <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>

最后效果 搞了两个多小时 

js 小键盘需求

标签：.net js小键盘

原文地址：http://pftworld.blog.51cto.com/1491194/1761400