/* 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));
        });
        
    });

页面代码

 
            
                
                    
                        
                            
商品码:
                        
                        
                            
                        
                    
                    
                        
                            
批    号: