JS数字键盘，JS小键盘

CSS代码：

#numberkeyboard{
        border: 1px solid #b3b3b3;    background: #f2f3f7;    height: 285px;    margin: 0;    padding: 2px;    position: relative;    visibility: visible !important;    width: 285px;}    #numberkeyboard .numbtn    {
            -moz-border-radius: 4px; /* Gecko browsers */        -webkit-border-radius: 4px; /* Webkit browsers */        border-radius: 4px; /* W3C syntax 圆角 */        float: left;        height: 68px;        width: 68px;        border: solid 1px #b3b3b3;        margin-top: 1px;        margin-left: 1px;        font-family: Verdana, 微软雅黑, 雅黑;        font-size: 22px;        line-height: 69px;        text-align: center;        cursor: default;        background-image: url(numbtn.png);        background-position: -1px -1px;    }        #numberkeyboard .numbtn:hover        {
                background-position: -1px -72px;        }.numbtndown{
        background-position: -1px -143px !important;}

JS代码：

//小键盘function loadNumberKeyboard(obj) {    if ($("#numberkeyboard").length == 0) {        var numbtnhtml = '
      
       1
      
      
       2
      
      
       3
      
      
       ←
      
      
       4
      
      
       5
      
      
       6
      
      
       清空
      
      
       7
      
      
       8
      
      
       9
      
      
      
       +/-
      
      
       0
      
      
       .
      
      
       关闭
      
';        $("body").append('
      
       
        ' + numbtnhtml + '
       
      
');        $("#numberkeyboard").find(".numbtn").bind("mousedown", function () {            $(this).addClass("numbtndown");        });        $("#numberkeyboard").find(".numbtn").bind("mouseup", function () {            $(this).removeClass("numbtndown");        });    }    var containerDiv = $("#numberkeyboard").parent();    containerDiv.show();    containerDiv.css("z-index", 9100);    obj = $(obj);    if (obj.attr("id")) {        var objpadding = parseInt(obj.css("padding-top").replace("px", "")) + parseInt(obj.css("padding-bottom").replace("px", ""));        if (obj.offset().left + 340 >= $(window).width()) {            containerDiv.css("left", $(window).width() - 340);        }        else {            containerDiv.css("left", obj.offset().left);        }        if (obj.offset().top + 291 + obj.height() + objpadding + 2 + 5 >= $(window).height() + $(window).scrollTop()) {            containerDiv.css("top", obj.offset().top - 291 - 5);        }        else {            containerDiv.css("top", obj.offset().top + obj.height() + objpadding + 2 + 5);        }    }    $("#numberkeyboard").find(".numbtn").unbind("click");    $("#numberkeyboard").find(".numbtn").bind("click", function () {        obj.focus();        var key = $(this).attr("key");        switch (key) {            case "backspace":                if (obj.val().length > 0) {                    obj.val(obj.val().substr(0, obj.val().length - 1));                }                break;            case "clear":                obj.val("");                break;            case "sign":                if (obj.val().length > 0) {                    if (obj.val().substr(0, 1) == "-") {                        obj.val(obj.val().substr(1, obj.val().length - 1));                    }                    else {                        obj.val("-" + obj.val());                    }                }                break;            case "close":                $("#numberkeyboard").find(".numbtn").unbind("click");                containerDiv.hide();                break;            default:                obj.val(obj.val() + key);                break;        }    });}

样式图片(numbtn.png)：

如何使用：

1、引用CSS和JS：

2、初始化：

$(function () {    $("input[type='text']").click(function () {        loadNumberKeyboard(this);    });});

3、效果图：