码迷,mamicode.com
首页 > Web开发 > 详细

JS数字键盘

时间:2015-02-28 10:03:49      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:

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、效果图:

技术分享

 

JS数字键盘

标签:

原文地址:http://www.cnblogs.com/s0611163/p/4304714.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!