js 小键盘需求

￡神魔★判官ぃ 2022-01-15 07:23 197阅读 0赞

/* 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;" οnfοcus="">
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <h3>批    号:</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" οnclick="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>

最后效果 搞了两个多小时

[![wKioL1cGJhzRAFjsAACji4FgIe4159.png][]][wKioL1cGJhzRAFjsAACji4FgIe4159.png]

转载于:https://blog.51cto.com/pftworld/1761400

[wKioL1cGJhzRAFjsAACji4FgIe4159.png]: https://s1.51cto.com/wyfs02/M00/7E/A4/wKioL1cGJhzRAFjsAACji4FgIe4159.png