JS数字键盘

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;

}

View Code

JS代码：

//小键盘

function loadNumberKeyboard(obj) {

    if ($("#numberkeyboard").length == 0) {

        var numbtnhtml = '<div class="numbtn" key="1">1</div><div class="numbtn" key="2">2</div><div class="numbtn" key="3">3</div><div class="numbtn" key="backspace">←</div><div class="numbtn" key="4">4</div><div class="numbtn" key="5">5</div><div class="numbtn" key="6">6</div><div class="numbtn" key="clear">清空</div><div class="numbtn" key="7">7</div><div class="numbtn" key="8">8</div><div class="numbtn" key="9">9</div><div class="numbtn" key="" style="visibility: hidden;"></div><div class="numbtn" key="sign">+/-</div><div class="numbtn" key="0">0</div><div class="numbtn" key=".">.</div><div class="numbtn" key="close">关闭</div>';

        $("body").append('<div style="position: absolute; left: 0; top: 0; display: none;"><div id="numberkeyboard">' + numbtnhtml + '</div></div>');

        $("#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;

        }

    });

}

View Code

样式图片(numbtn.png)：

如何使用：

1、引用CSS和JS：

<link type="text/css" href="~/Scripts/NumKey/NumKey.css" rel="stylesheet" />

<script type="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script>

<script type="text/javascript" src="~/Scripts/NumKey/NumKey.js"></script>

View Code

2、初始化：

$(function () {

    $("input[type='text']").click(function () {

        loadNumberKeyboard(this);

    });

});

View Code

3、效果图：