关于jQuery插件开发的问题

需求如图：点击文本框，弹出一个数字键盘，给文本框输入数字和退格。问题是这样：一个文本框没什么问题，当有两个或多个文本框都使用这个插件的时候，共用一个弹出键盘。
<div class="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>←</a>
    </div><script type="text/javascript">
        $(function() {
            $('#txtNum').numPicker({});
            $('#txtPwd').numPicker({});
        });
    </script>
但，像这样的话，点击数字，两个文本框都会同时输入。求给个思路，谢谢。jquery插件javascript插件function

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

还是模仿下jquery 的日期控件吧，应该差不多吧。
用面向对象的方法去做，先考虑你写的不是jQ插件，而是一个类，NumPicker类，实例化得到numPicker对象，然后考虑如何转化为jQ插件，把这个对象放到该输入框的jQuery data中就行了。
function NumPicker(elem,options){
  //initialize
}
NumPicker.prototype = {}; //原型方法....
其实这样就样就已经行了，如果用SeaJS做模块化，稍稍修改就能适配了。额，，，忘了LZ说的是要适配成jQ插件。好吧，见过一般的插件是这样：$.NumPicker = function(elem,options){};
$.NumPicker.prototype = {};
$.fn.numPicker = function(method,options){
   //调用类似于：$("#a").numPicker("update",{width:100})，
   //method就是如上的prototype定义的方法
   //处理$("div").numPicker({})这种情况,
  if(arguments.length < 2 && typeof(arguments[0]) !== 'string') {
    options = arguments[0];
    method = 'setup';
  }
  var retValue;
  this.each(function(){
    if(method === 'setup') {
      $(this).data("numPicker",new $.NumPicker(options));
    } else {
      var numPicker = $(this).data("numPicker");
      retValue = numPicker[method].call(numPicker,options);
    }
  }); //如果method是有返回值的，返回最后一个的，
//如果method没有返回值，返回this，不要中断jQ的方法链~~
//例如：$("#input").numPicker({max:100})
//                 .numPicker("update",{min:10,max:200})
//                 .numPicker("show");
//
  return retValue || this;
}自己的见解~，望对LZ有帮助
手敲的代码，发现有误，纠正一下第14行，应该把this传递给构造器的elem。
$(this).data("numPicker",new $.NumPicker(this,options));
在$.NumPicker里，可以做一些初始化，比如你那个下拉框的html代码append到body里，或者输入框的DOM结构附近啊，事件绑定啊，这些东西围绕的中心就是那个elem。对了，上面代码还有一个漏洞，在method==='setup'的时候，记得判断下，防止重复构造你的numPicker。
++1
用return this.each();这种
<!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;
            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){
            //obj 不知道楼主想传什么值
            var _this;
            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=_this.val(),k=$(this).text();
                    _this.val(k=="←"? v.substring(0, v.length-1):v+k);
                    e.stopPropagation();
                });
                $(document).click(function(){
                    $("#numpicker").animate({left:-100,top:-200},"fast");
                })
            }
            $(this).click(function(e){
                e.stopPropagation();
                _this=$(this);
                var xy=_this.offset();
                $("#numpicker").stop().animate({left:xy.left,top:xy.top+$(_this).height()+5});
            });
        }
    });
    $(document).ready(function(){
        $(".num").numPicker({});
    })
</script>
帐号：<input type="text" class="num" title="帐号"><br/>
密码：<input type="text" class="num" title="密码">
</body>
</html>
<!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;
            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=_this.val(),k=$(this).text();
                    _this.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();
                _this=$(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>