jquery模拟小键盘

【Javascript】

下载

新闻

文章

jquery模拟小键盘

源起CSDN论坛的一个帖子，即兴写的例子：

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>jq 小键盘插件</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <style type="text/css">
        #numpicker{
            position: absolute;
            width: 132px;
            left:-100px;top:-200px;
        }
        #numpicker a{
            width: 40px;height: 40px;
            background-color: #319ad6;
            color: #fff;
            -moz-user-select:none;
            hutia:expression(this.onselectstart=function(){return(false)});
            line-height: 40px;
            text-align: center;
            cursor: pointer;
            display: block;
            float: left;
            border: 2px solid #21415a;
        }
    </style>
</head>
<body>
<script type="text/javascript">
    jQuery.fn.extend({
        numPicker:function(obj){
            var ml=obj.maxLength||200;
            if($("#numpicker").size()==0){
                $('body').append('<div id="numpicker"><a>7</a><a>8</a><a>9</a><a>4</a><a>5</a><a>6</a><a>1</a><a>2</a><a>3</a><a>0</a><a style="width:84px">←</a></div>');
                $("#numpicker a").click(function(e){
                    var v=$("#numpicker").data("obj").val(),k=$(this).text();
                    $("#numpicker").data("obj").val(k=="←"? v.substring(0, v.length-1):v+(v.length<ml?k:""));
                    e.stopPropagation();
                });
                $(document).click(function(){
                    $("#numpicker").animate({left:-100,top:-200},"fast");
                })
            }
            $(this).attr(obj).click(function(e){
                e.stopPropagation();
                $("#numpicker").data("obj",$(this));
                var xy=$(this).offset();
                $("#numpicker").stop().animate({left:xy.left,top:xy.top+$(this).height()+5});
            });
        }
    });
    $(document).ready(function(){
        $(".num").numPicker({maxLength:8,readonly:true});
        $("#num").numPicker({maxLength:3});
    })
</script>
帐号：<input type="text" class="num" title="帐号"><br/>
密码：<input type="text" class="num" title="密码">
<input type="text" id="num" title="密码">
</body>
</html>