江阴网站建设,江阴网站制作,江阴网站设计,江阴SEO优化,江阴小程序开发-江阴雨辰互联

  1. JustNews 首页
  2. questions

javascript - restricting input tags to maximum 5 - Stack Overflow

admin••questions•阅读1

I have got following jquery tags plugin.I want to to restrict maxmimum 5 tags, so that user can not ent

I have got following jquery tags plugin.

I want to to restrict maxmimum 5 tags, so that user can not enter more than 5 words (separated by spaces). Can someone please help me doing it? Thanks.. Following is original plugin code:

(function($) {

 var delimiter = new Array();

 jQuery.fn.addTag = function(value,options) {

   var options = jQuery.extend({focus:false},options);
   this.each(function() { 
    id = $(this).attr('id');

    var tagslist = $(this).val().split(delimiter[id]);
    if (tagslist[0] == '') { 
     tagslist = new Array();
    }
    value = jQuery.trim(value);
    if (value !='') { 

     $('<span class="tag">'+value + '&nbsp;&nbsp;<a href="#" title="Remove tag" onclick="return $(\'#'+id + '\').removeTag(\'' + escape(value) + '\');">x</a></span>').insertBefore('#'+id+'_addTag');
     tagslist.push(value);

     $('#'+id+'_tag').val('');
     if (options.focus) {
      $('#'+id+'_tag').focus();
     } else {  
      $('#'+id+'_tag').blur();
     }
    }
    jQuery.fn.tagsInput.updateTagsField(this,tagslist);

   });  

   return false;
  };

 jQuery.fn.removeTag = function(value) { 

   this.each(function() { 
    id = $(this).attr('id');

    var old = $(this).val().split(delimiter[id]);


    $('#'+id+'_tagsinput .tag').remove();
    str = '';
    for (i=0; i< old.length; i++) { 
     if (escape(old[i])!=value) { 
      str = str + delimiter[id] +old[i];
     }
    }

    jQuery.fn.tagsInput.importTags(this,str);
   });

   return false;

  };


 jQuery.fn.tagsInput = function(options) { 

  var settings = jQuery.extend({defaultText:'add a tag',width:'300px',height:'100px','hide':true,'delimiter':',',autoplete:{selectFirst:false}},options);

  this.each(function() { 
   if (settings.hide) { 
    $(this).hide();    
   }

   id = $(this).attr('id')

   data = jQuery.extend({
    pid:id,
    real_input: '#'+id,
    holder: '#'+id+'_tagsinput',
    input_wrapper: '#'+id+'_addTag',
    fake_input: '#'+id+'_tag',
   },settings);


   delimiter[id] = data.delimiter;

   $('<div id="'+id+'_tagsinput" class="tagsinput"><div id="'+id+'_addTag"><input id="'+id+'_tag" value="" default="'+settings.defaultText+'" /></div><div class="tags_clear"></div></div>').insertAfter(this);

   $(data.holder).css('width',settings.width);
   $(data.holder).css('height',settings.height);


   if ($(data.real_input).val()!='') { 
    jQuery.fn.tagsInput.importTags($(data.real_input),$(data.real_input).val());
   } else {
    $(data.fake_input).val($(data.fake_input).attr('default'));
    $(data.fake_input).css('color','#666666');    
   }


   $(data.holder).bind('click',data,function(event) {
    $(event.data.fake_input).focus();
   });

   // if user types a ma, create a new tag
   $(data.fake_input).bind('keypress',data,function(event) { 
    if (event.which==event.data.delimiter.charCodeAt(0) || event.which==13) { 

     $(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true});
     return false;
    }
   });


   $(data.fake_input).bind('focus',data,function(event) {
    if ($(event.data.fake_input).val()==$(event.data.fake_input).attr('default')) { 
     $(event.data.fake_input).val('');
    }
    $(event.data.fake_input).css('color','#000000');  
   });

   if (settings.autoplete_url != undefined) { 
    $(data.fake_input).autoplete(settings.autoplete_url,settings.autoplete).bind('result',data,function(event,data,formatted) { 
     if (data) {
      d = data + ""; 
      $(event.data.real_input).addTag(d,{focus:true});
     }
    });;


    $(data.fake_input).bind('blur',data,function(event) { 
     if ($(event.data.fake_input).val() != $(event.data.fake_input).attr('default')) {
      $(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:false});      
     }

     $(event.data.fake_input).val($(event.data.fake_input).attr('default'));
     $(event.data.fake_input).css('color','#666666');
     return false;
    });


   } else {

     // if a user tabs out of the field, create a new tag
     // this is only available if autoplete is not used.
     $(data.fake_input).bind('blur',data,function(event) { 
      var d = $(this).attr('default');
      if ($(event.data.fake_input).val()!='' && $(event.data.fake_input).val()!=d) { 
       event.preventDefault();
       $(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true});
      } else {
       $(event.data.fake_input).val($(event.data.fake_input).attr('default'));
       $(event.data.fake_input).css('color','#666666');
      }
      return false;
     });

   }

   $(data.fake_input).blur();
  });

  return this;

 };


 jQuery.fn.tagsInput.updateTagsField = function(obj,tagslist) { 

   id = $(obj).attr('id');
   $(obj).val(tagslist.join(delimiter[id]));
  };



 jQuery.fn.tagsInput.importTags = function(obj,val) {

   $(obj).val('');
   id = $(obj).attr('id');
   var tags = val.split(delimiter[id]);
   for (i=0; i<tags.length; i++) { 
    $(obj).addTag(tags[i],{focus:false});
   }
  };

})(jQuery);

I have got following jquery tags plugin.

I want to to restrict maxmimum 5 tags, so that user can not enter more than 5 words (separated by spaces). Can someone please help me doing it? Thanks.. Following is original plugin code:

(function($) {

 var delimiter = new Array();

 jQuery.fn.addTag = function(value,options) {

   var options = jQuery.extend({focus:false},options);
   this.each(function() { 
    id = $(this).attr('id');

    var tagslist = $(this).val().split(delimiter[id]);
    if (tagslist[0] == '') { 
     tagslist = new Array();
    }
    value = jQuery.trim(value);
    if (value !='') { 

     $('<span class="tag">'+value + '&nbsp;&nbsp;<a href="#" title="Remove tag" onclick="return $(\'#'+id + '\').removeTag(\'' + escape(value) + '\');">x</a></span>').insertBefore('#'+id+'_addTag');
     tagslist.push(value);

     $('#'+id+'_tag').val('');
     if (options.focus) {
      $('#'+id+'_tag').focus();
     } else {  
      $('#'+id+'_tag').blur();
     }
    }
    jQuery.fn.tagsInput.updateTagsField(this,tagslist);

   });  

   return false;
  };

 jQuery.fn.removeTag = function(value) { 

   this.each(function() { 
    id = $(this).attr('id');

    var old = $(this).val().split(delimiter[id]);


    $('#'+id+'_tagsinput .tag').remove();
    str = '';
    for (i=0; i< old.length; i++) { 
     if (escape(old[i])!=value) { 
      str = str + delimiter[id] +old[i];
     }
    }

    jQuery.fn.tagsInput.importTags(this,str);
   });

   return false;

  };


 jQuery.fn.tagsInput = function(options) { 

  var settings = jQuery.extend({defaultText:'add a tag',width:'300px',height:'100px','hide':true,'delimiter':',',autoplete:{selectFirst:false}},options);

  this.each(function() { 
   if (settings.hide) { 
    $(this).hide();    
   }

   id = $(this).attr('id')

   data = jQuery.extend({
    pid:id,
    real_input: '#'+id,
    holder: '#'+id+'_tagsinput',
    input_wrapper: '#'+id+'_addTag',
    fake_input: '#'+id+'_tag',
   },settings);


   delimiter[id] = data.delimiter;

   $('<div id="'+id+'_tagsinput" class="tagsinput"><div id="'+id+'_addTag"><input id="'+id+'_tag" value="" default="'+settings.defaultText+'" /></div><div class="tags_clear"></div></div>').insertAfter(this);

   $(data.holder).css('width',settings.width);
   $(data.holder).css('height',settings.height);


   if ($(data.real_input).val()!='') { 
    jQuery.fn.tagsInput.importTags($(data.real_input),$(data.real_input).val());
   } else {
    $(data.fake_input).val($(data.fake_input).attr('default'));
    $(data.fake_input).css('color','#666666');    
   }


   $(data.holder).bind('click',data,function(event) {
    $(event.data.fake_input).focus();
   });

   // if user types a ma, create a new tag
   $(data.fake_input).bind('keypress',data,function(event) { 
    if (event.which==event.data.delimiter.charCodeAt(0) || event.which==13) { 

     $(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true});
     return false;
    }
   });


   $(data.fake_input).bind('focus',data,function(event) {
    if ($(event.data.fake_input).val()==$(event.data.fake_input).attr('default')) { 
     $(event.data.fake_input).val('');
    }
    $(event.data.fake_input).css('color','#000000');  
   });

   if (settings.autoplete_url != undefined) { 
    $(data.fake_input).autoplete(settings.autoplete_url,settings.autoplete).bind('result',data,function(event,data,formatted) { 
     if (data) {
      d = data + ""; 
      $(event.data.real_input).addTag(d,{focus:true});
     }
    });;


    $(data.fake_input).bind('blur',data,function(event) { 
     if ($(event.data.fake_input).val() != $(event.data.fake_input).attr('default')) {
      $(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:false});      
     }

     $(event.data.fake_input).val($(event.data.fake_input).attr('default'));
     $(event.data.fake_input).css('color','#666666');
     return false;
    });


   } else {

     // if a user tabs out of the field, create a new tag
     // this is only available if autoplete is not used.
     $(data.fake_input).bind('blur',data,function(event) { 
      var d = $(this).attr('default');
      if ($(event.data.fake_input).val()!='' && $(event.data.fake_input).val()!=d) { 
       event.preventDefault();
       $(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true});
      } else {
       $(event.data.fake_input).val($(event.data.fake_input).attr('default'));
       $(event.data.fake_input).css('color','#666666');
      }
      return false;
     });

   }

   $(data.fake_input).blur();
  });

  return this;

 };


 jQuery.fn.tagsInput.updateTagsField = function(obj,tagslist) { 

   id = $(obj).attr('id');
   $(obj).val(tagslist.join(delimiter[id]));
  };



 jQuery.fn.tagsInput.importTags = function(obj,val) {

   $(obj).val('');
   id = $(obj).attr('id');
   var tags = val.split(delimiter[id]);
   for (i=0; i<tags.length; i++) { 
    $(obj).addTag(tags[i],{focus:false});
   }
  };

})(jQuery);
  • javascript
  • jquery
Share Improve this question edited Dec 12, 2010 at 18:59 skaffman 404k96 gold badges824 silver badges775 bronze badges asked Dec 12, 2010 at 18:47 johnjohn 191 silver badge2 bronze badges 3
  • 1 So, do you expect us to make it work for you? – metrobalderas Commented Dec 12, 2010 at 20:17
  • just asking for some help, if someone can.. as i tried and couldn't make it work. – john Commented Dec 12, 2010 at 22:24
  • so did you have a look at my answer ? coz it took me ages to figure it out for you ;) – Sina Fathieh Commented Dec 18, 2010 at 13:54
Add a ment  | 

3 Answers 3

Reset to default 3

best way is to count the number of "tag" classes already added, and then you can handle it differently, for example you can prevent showing the "add a tag" input once 5 tags inserted by defining maxTags and updating jQuery.fn.addTag and jQuery.fn.removeTag :

/*

    jQuery Tags Input Plugin 1.0

    Copyright (c) 2010 XOXCO, Inc

    Documentation for this plugin lives here:
    http://xoxco./clickable/jquery-tags-input

    Licensed under the MIT license:
    http://www.opensource/licenses/mit-license.php

    [email protected]

*/

(function($) {

    var delimiter = new Array();
    var maxTags = 5;
    jQuery.fn.addTag = function(value,options) {

            var options = jQuery.extend({focus:false},options);
            this.each(function() { 
                id = $(this).attr('id');

                var tagslist = $(this).val().split(delimiter[id]);
                if (tagslist[0] == '') { 
                    tagslist = new Array();
                }
                value = jQuery.trim(value);


                if (value !='') { 

                    $('<span class="tag">'+value + '&nbsp;&nbsp;<a href="#" title="Remove tag" onclick="return $(\'#'+id + '\').removeTag(\'' + escape(value) + '\');">x</a></span>').insertBefore('#'+id+'_addTag');
                    tagslist.push(value);

                    $('#'+id+'_tag').val('');
                    if (options.focus) {
                        $('#'+id+'_tag').focus();
                    } else {        
                        $('#'+id+'_tag').blur();
                    }
                }
                jQuery.fn.tagsInput.updateTagsField(this,tagslist);



            });        
            if($(".tag").length>maxTags-1){$('#'+id+'_addTag').hide()}
            return false;
        };

    jQuery.fn.removeTag = function(value) { 

            this.each(function() { 
                id = $(this).attr('id');

                var old = $(this).val().split(delimiter[id]);


                $('#'+id+'_tagsinput .tag').remove();
                str = '';
                for (i=0; i< old.length; i++) { 
                    if (escape(old[i])!=value) { 
                        str = str + delimiter[id] +old[i];
                    }
                }

                jQuery.fn.tagsInput.importTags(this,str);
            });
             if($(".tag").length<maxTags){$('#'+id+'_addTag').show()}       
            return false;

        };


    jQuery.fn.tagsInput = function(options) { 

        var settings = jQuery.extend({defaultText:'add a tag',width:'300px',height:'100px','hide':true,'delimiter':',',autoplete:{selectFirst:false}},options);

        this.each(function() { 
            if (settings.hide) { 
                $(this).hide();                
            }

            id = $(this).attr('id')

            data = jQuery.extend({
                pid:id,
                real_input: '#'+id,
                holder: '#'+id+'_tagsinput',
                input_wrapper: '#'+id+'_addTag',
                fake_input: '#'+id+'_tag',
            },settings);


            delimiter[id] = data.delimiter;



  $('<div id="'+id+'_tagsinput" class="tagsinput"><div id="'+id+'_addTag"><input id="'+id+'_tag" value="" default="'+settings.defaultText+'" /></div><div class="tags_clear"></div></div>').insertAfter(this);


            $(data.holder).css('width',settings.width);
            $(data.holder).css('height',settings.height);


            if ($(data.real_input).val()!='') { 
                jQuery.fn.tagsInput.importTags($(data.real_input),$(data.real_input).val());
            } else {
                $(data.fake_input).val($(data.fake_input).attr('default'));
                $(data.fake_input).css('color','#666666');                
            }


            $(data.holder).bind('click',data,function(event) {
                $(event.data.fake_input).focus();
            });

            // if user types a ma, create a new tag
            $(data.fake_input).bind('keypress',data,function(event) { 
                if (event.which==event.data.delimiter.charCodeAt(0) || event.which==13) { 

                    $(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true});
                    return false;
                }
            });


            $(data.fake_input).bind('focus',data,function(event) {
                if ($(event.data.fake_input).val()==$(event.data.fake_input).attr('default')) { 
                    $(event.data.fake_input).val('');
                }
                $(event.data.fake_input).css('color','#000000');        
            });

            if (settings.autoplete_url != undefined) { 
                $(data.fake_input).autoplete(settings.autoplete_url,settings.autoplete).bind('result',data,function(event,data,formatted) { 
                    if (data) {
                        d = data + "";    
                        $(event.data.real_input).addTag(d,{focus:true});
                    }
                });;


                $(data.fake_input).bind('blur',data,function(event) { 
                    if ($(event.data.fake_input).val() != $(event.data.fake_input).attr('default')) {
                        $(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:false});                        
                    }
                    $(event.data.fake_input).val($(event.data.fake_input).attr('default'));
                    $(event.data.fake_input).css('color','#666666');
                    return false;
                });


            } else {

                    // if a user tabs out of the field, create a new tag
                    // this is only available if autoplete is not used.
                    $(data.fake_input).bind('blur',data,function(event) { 
                        var d = $(this).attr('default');
                        if ($(event.data.fake_input).val()!='' && $(event.data.fake_input).val()!=d) { 
                            event.preventDefault();
                            $(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true});
                        } else {
                            $(event.data.fake_input).val($(event.data.fake_input).attr('default'));
                            $(event.data.fake_input).css('color','#666666');
                        }
                        return false;
                    });

            }

            $(data.fake_input).blur();
        });

        return this;

    };


    jQuery.fn.tagsInput.updateTagsField = function(obj,tagslist) { 

            id = $(obj).attr('id');
            $(obj).val(tagslist.join(delimiter[id]));
        };



    jQuery.fn.tagsInput.importTags = function(obj,val) {

            $(obj).val('');
            id = $(obj).attr('id');
            var tags = val.split(delimiter[id]);
            for (i=0; i<tags.length; i++) { 
                $(obj).addTag(tags[i],{focus:false});
            }
        };

})(jQuery);

How about adding something like this:

if($('.tag').length>=5){
      $('#tags_tag').attr('disabled','true');
    }

I put a little more flair into my demo.

Probably the easiest solution is to change line 89 of jquery.tagsinput.js from:

var skipTag = $(tagslist).tagExist(value);

to:

var skipTag = $(tagslist).length > 5 || $(tagslist).tagExist(value);

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745357367a4624199.html

adminadmin
0

相关推荐

  • javascript - restricting input tags to maximum 5 - Stack Overflowquestions

    javascript - restricting input tags to maximum 5 - Stack Overflow

    I have got following jquery tags plugin.I want to to restrict maxmimum 5 tags, so that user can not ent

    adminadmin
    5小时前
    20

发表回复

评论列表（0条）

  • 暂无评论

联系我们

400-800-8888

在线咨询： QQ交谈

邮件：admin@example.com

工作时间：周一至周五，9:30-18:30，节假日休息

关注微信