首页 新闻 搜索 专区 学院

关于jQuery插件开发的问题

0
悬赏园豆:10 [已解决问题] 解决于 2013-10-04 10:30

需求如图:点击文本框,弹出一个数字键盘,给文本框输入数字和退格。

问题是这样:一个文本框没什么问题,当有两个或多个文本框都使用这个插件的时候,共用一个弹出键盘。

<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>

但,像这样的话,点击数字,两个文本框都会同时输入。求给个思路,谢谢。

饮料的主页 饮料 | 菜鸟二级 | 园豆:240
提问于:2013-09-30 15:02
< >
分享
最佳答案
0

1、个人觉得你的numPicker插件方法应该有问题。请检查numPicker的选择值方法。

2、建议:如果可以公开numPicker方法代码,别人回答就更好了。

3、建议:numPicker是一个插件,软键盘可以写到插件里面去。不用调用页面写。

 

4、我针对这个问题,做了一个简单实例(不是完整功能)

4.1 Demo:http://runjs.cn/detail/mxyduwhp

4.2 代码(JS):

  1 // 简单软键盘,针对http://q.cnblogs.com/q/55419/问题
  2 (function ($) {
  3     $(document).ready(function(){
  4         $('#txtNumberFirst').numberPicker();
  5     $('#txtNumberSecond').numberPicker();
  6         $('#btnClear').on('click',function(){
  7             $('input[type=text]').val('');
  8         });
  9     }); 
 10 })(jQuery);
 11 
 12 (function ($) {
 13     if (typeof Object.create !== 'function') {
 14         Object.create = function (obj) {
 15             function F() { };
 16             F.prototype = obj;
 17             return new F();
 18         };
 19     }
 20     
 21     var NumberPicker = {
 22                 
 23                 // 初始化
 24         init: function (options, elem) {
 25             var self = this;
 26             self.elem = elem;
 27             self.$elem = $(elem);
 28             self.options = $.extend({}, $.fn.numberPicker.options, options);
 29             self.txtClick();
 30         },
 31             
 32                 // 页面绑定控件点击事件
 33         txtClick: function () {
 34             var self = this;
 35             self.$elem.on('click', function () {
 36                 self.showSoftKeyboard();
 37             });
 38         },
 39             
 40                 // 软键盘数字点击事件
 41         numClick: function () {
 42             var self = this,
 43                 txtVal = '',
 44                 txtArr = [];
 45             $('#' + self.options.keyboard).delegate('a', 'click', function () {
 46                 txtVal = self.$elem.val();
 47                 txtArr.push(txtVal);
 48                 txtArr.push($(this).text());
 49                 self.$elem.val(txtArr.join('')).focus();
 50                 txtArr = [];
 51             });
 52         },
 53             
 54                 // 显示软件键盘
 55         showSoftKeyboard: function () {
 56             var self = this;
 57             softKeyboard = $('#' + self.options.keyboard);
 58             softKeyboard.remove();
 59             self.createSoftKeyboard();
 60             self.numClick();
 61             // self.hideSoftKeyboard();
 62         },
 63             
 64                 // 创建软键盘HTML
 65         createSoftKeyboard: function () {
 66             var self = this,
 67                 item = self.options.item,
 68                 itemArr = [];
 69             itemArr.push('<div id="' + self.options.keyboard + '">');
 70             itemArr.push('<a href=\'javascript:void(0);\'>1</a>');
 71             itemArr.push('<a href=\'javascript:void(0);\'>2</a>');
 72             itemArr.push('<a href=\'javascript:void(0);\'>3</a>');
 73             itemArr.push('<a href=\'javascript:void(0);\'>4</a>');
 74             itemArr.push('<a href=\'javascript:void(0);\'>5</a>');
 75             itemArr.push('<a href=\'javascript:void(0);\'>6</a>');
 76             itemArr.push('<a href=\'javascript:void(0);\'>7</a>');
 77             itemArr.push('<a href=\'javascript:void(0);\'>8</a>');
 78             itemArr.push('<a href=\'javascript:void(0);\'>9</a>');
 79             itemArr.push('<a href=\'javascript:void(0);\'>0</a>');
 80             itemArr.push('</div>');
 81             $('body').append(itemArr.join(''));
 82         }
 83     };
 84     
 85         // 页面是否存在指定元素
 86     $.fn.isExist = function () {
 87         return this.length > 0;
 88     };
 89             
 90         // 扩展jQuery方法(页面调用此方法)
 91     $.fn.numberPicker = function (options) {
 92         return this.each(function () {
 93             var numberPicker = Object.create(NumberPicker);
 94             numberPicker.init(options, this);
 95         });
 96     };
 97     
 98         // 插件配置
 99     $.fn.numberPicker.options = {
100         keyboard: 'divSoftKeyboard'
101     };
102 
103 })(jQuery);

 

4.3 示例:

 

希望愚码对你有帮助

收获园豆:10
Vivian软陶公仔 | 菜鸟二级 |园豆:284 | 2013-10-02 13:16

感谢!

下次我会记得把代码也写出来的。

原来是要用each,创建多个对象。

每一次控件的触发都要重新create一个软键盘,我一直以为一次创建就可以了,所以才导致重复调用,两个文本框同时输入了。

饮料 | 园豆:240 (菜鸟二级) | 2013-10-04 10:30

@饮料: 一次创建就可以了。加个判断,不用多次创建,我那是随便写,没加判断之类的东西。

你可以像这样(这样的判断不科学的)加些判断,如下所示:

Vivian软陶公仔 | 园豆:284 (菜鸟二级) | 2013-10-06 11:22

@bhwebxu: 

我在你的runjs代码里加了判断,就会两个文本框都有作用了。

饮料 | 园豆:240 (菜鸟二级) | 2013-10-08 09:06
饮料 | 园豆:240 (菜鸟二级) | 2013-10-08 09:10

@饮料: 

$('#' + self.options.keyboard).undelegate('click').delegate('a', 'click',
        function() {
            txtVal = self.$elem.val();
            if ($(this).text() == '←') {
                if (txtVal.length > 0) {
                    self.$elem.val(txtVal.substring(0, txtVal.length - 1));
                }
            } else {
                self.$elem.val(txtVal + $(this).text());
            }
        });

undelegate

饮料 | 园豆:240 (菜鸟二级) | 2013-10-08 09:48
其他回答(2)
0

将你的#txtNum用上呗。

幻天芒 | 园豆:36662 (高人七级) | 2013-09-30 15:17
0

$("#txtNum").click(function() {
$('#txtNum').numPicker({});
});
$("#txtPwd").click(function() {
$('#txtPwd').numPicker({});
});

单独触发是否可以解决

心在遠方 | 园豆:209 (菜鸟二级) | 2013-09-30 16:15
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册