diff --git a/README.md b/README.md index a8abe7a..22a27f6 100644 --- a/README.md +++ b/README.md @@ -99,5 +99,6 @@ option to false. 'removeWithBackspace' : true, 'minChars' : 0, 'maxChars' : 0, // if not provided there is no limit - 'placeholderColor' : '#666666' + 'placeholderColor' : '#666666', + 'honorDisabled' : false }); diff --git a/dist/jquery.tagsinput.min.css b/dist/jquery.tagsinput.min.css index e42ba09..60579b4 100644 --- a/dist/jquery.tagsinput.min.css +++ b/dist/jquery.tagsinput.min.css @@ -1 +1 @@ -div.tagsinput{border:1px solid #CCC;background:#FFF;padding:5px;width:300px;height:100px;overflow-y:auto}div.tagsinput span.tag{border:1px solid #a5d24a;-moz-border-radius:2px;-webkit-border-radius:2px;display:block;float:left;padding:5px;text-decoration:none;background:#cde69c;color:#638421;margin-right:5px;margin-bottom:5px;font-family:helvetica;font-size:13px}div.tagsinput span.tag a{font-weight:700;color:#82ad2b;text-decoration:none;font-size:11px}div.tagsinput input{width:80px;margin:0 5px 5px 0;font-family:helvetica;font-size:13px;border:1px solid transparent;padding:5px;background:0 0;color:#000;outline:0}div.tagsinput div{display:block;float:left}.tags_clear{clear:both;width:100%;height:0}.not_valid{background:#FBD8DB!important;color:#90111A!important} \ No newline at end of file +div.tagsinput{border:1px solid #CCC;background:#FFF;padding:5px;width:300px;height:100px;overflow-y:auto}div.tagsinput.inputdisabled span.tag a{cursor:default}div.tagsinput span.tag{border:1px solid #a5d24a;-moz-border-radius:2px;-webkit-border-radius:2px;display:block;float:left;padding:5px;text-decoration:none;background:#cde69c;color:#638421;margin-right:5px;margin-bottom:5px;font-family:helvetica;font-size:13px}div.tagsinput span.tag a{font-weight:700;color:#82ad2b;text-decoration:none;font-size:11px}div.tagsinput input{width:80px;margin:0 5px 5px 0;font-family:helvetica;font-size:13px;border:1px solid transparent;padding:5px;background:0 0;color:#000;outline:0}div.tagsinput div{display:block;float:left}.tags_clear{clear:both;width:100%;height:0}.not_valid{background:#FBD8DB!important;color:#90111A!important} \ No newline at end of file diff --git a/dist/jquery.tagsinput.min.js b/dist/jquery.tagsinput.min.js index fbb0c7f..18dfeca 100644 --- a/dist/jquery.tagsinput.min.js +++ b/dist/jquery.tagsinput.min.js @@ -1 +1 @@ -!function(a){var b=new Array,c=new Array;a.fn.doAutosize=function(b){var c=a(this).data("minwidth"),d=a(this).data("maxwidth"),e="",f=a(this),g=a("#"+a(this).data("tester_id"));if(e!==(e=f.val())){var h=e.replace(/&/g,"&").replace(/\s/g," ").replace(//g,">");g.html(h);var i=g.width(),j=i+b.comfortZone>=c?i+b.comfortZone:c,k=f.width(),l=k>j&&j>=c||j>c&&d>j;l&&f.width(j)}},a.fn.resetAutosize=function(b){var c=a(this).data("minwidth")||b.minInputWidth||a(this).width(),d=a(this).data("maxwidth")||b.maxInputWidth||a(this).closest(".tagsinput").width()-b.inputPadding,e=a(this),f=a("").css({position:"absolute",top:-9999,left:-9999,width:"auto",fontSize:e.css("fontSize"),fontFamily:e.css("fontFamily"),fontWeight:e.css("fontWeight"),letterSpacing:e.css("letterSpacing"),whiteSpace:"nowrap"}),g=a(this).attr("id")+"_autosize_tester";!a("#"+g).length>0&&(f.attr("id",g),f.appendTo("body")),e.data("minwidth",c),e.data("maxwidth",d),e.data("tester_id",g),e.css("width",c)},a.fn.addTag=function(d,e){return e=jQuery.extend({focus:!1,callback:!0},e),this.each(function(){var f=a(this).attr("id"),g=a(this).val().split(b[f]);if(""==g[0]&&(g=new Array),d=jQuery.trim(d),e.unique){var h=a(this).tagExist(d);1==h&&a("#"+f+"_tag").addClass("not_valid")}else var h=!1;if(""!=d&&1!=h){if(a("").addClass("tag").append(a("").text(d).append("  "),a("",{href:"#",title:"Removing tag",text:"x"}).click(function(){return a("#"+f).removeTag(escape(d))})).insertBefore("#"+f+"_addTag"),g.push(d),a("#"+f+"_tag").val(""),e.focus?a("#"+f+"_tag").focus():a("#"+f+"_tag").blur(),a.fn.tagsInput.updateTagsField(this,g),e.callback&&c[f]&&c[f].onAddTag){var i=c[f].onAddTag;i.call(this,d)}if(c[f]&&c[f].onChange){var j=g.length,i=c[f].onChange;i.call(this,a(this),g[j-1])}}}),!1},a.fn.removeTag=function(d){return d=unescape(d),this.each(function(){var e=a(this).attr("id"),f=a(this).val().split(b[e]);for(a("#"+e+"_tagsinput .tag").remove(),str="",i=0;i=0},a.fn.importTags=function(b){var c=a(this).attr("id");a("#"+c+"_tagsinput .tag").remove(),a.fn.tagsInput.importTags(this,b)},a.fn.tagsInput=function(e){var f=jQuery.extend({interactive:!0,defaultText:"add a tag",minChars:0,width:"300px",height:"100px",autocomplete:{selectFirst:!1},hide:!0,delimiter:",",unique:!0,removeWithBackspace:!0,placeholderColor:"#666666",autosize:!0,comfortZone:20,inputPadding:12},e),g=0;return this.each(function(){if("undefined"==typeof a(this).attr("data-tagsinput-init")){a(this).attr("data-tagsinput-init",!0),f.hide&&a(this).hide();var e=a(this).attr("id");(!e||b[a(this).attr("id")])&&(e=a(this).attr("id","tags"+(new Date).getTime()+g++).attr("id"));var h=jQuery.extend({pid:e,real_input:"#"+e,holder:"#"+e+"_tagsinput",input_wrapper:"#"+e+"_addTag",fake_input:"#"+e+"_tag"},f);b[e]=h.delimiter,(f.onAddTag||f.onRemoveTag||f.onChange)&&(c[e]=new Array,c[e].onAddTag=f.onAddTag,c[e].onRemoveTag=f.onRemoveTag,c[e].onChange=f.onChange);var i='
';if(f.interactive&&(i=i+''),i+='
',a(i).insertAfter(this),a(h.holder).css("width",f.width),a(h.holder).css("min-height",f.height),a(h.holder).css("height",f.height),""!=a(h.real_input).val()&&a.fn.tagsInput.importTags(a(h.real_input),a(h.real_input).val()),f.interactive){if(a(h.fake_input).val(a(h.fake_input).attr("data-default")),a(h.fake_input).css("color",f.placeholderColor),a(h.fake_input).resetAutosize(f),a(h.holder).bind("click",h,function(b){a(b.data.fake_input).focus()}),a(h.fake_input).bind("focus",h,function(b){a(b.data.fake_input).val()==a(b.data.fake_input).attr("data-default")&&a(b.data.fake_input).val(""),a(b.data.fake_input).css("color","#000000")}),void 0!=f.autocomplete_url){autocomplete_options={source:f.autocomplete_url};for(attrname in f.autocomplete)autocomplete_options[attrname]=f.autocomplete[attrname];void 0!==jQuery.Autocompleter?(a(h.fake_input).autocomplete(f.autocomplete_url,f.autocomplete),a(h.fake_input).bind("result",h,function(b,c,d){c&&a("#"+e).addTag(c[0]+"",{focus:!0,unique:f.unique})})):void 0!==jQuery.ui.autocomplete&&(a(h.fake_input).autocomplete(autocomplete_options),a(h.fake_input).bind("autocompleteselect",h,function(b,c){return a(b.data.real_input).addTag(c.item.value,{focus:!0,unique:f.unique}),!1}))}else a(h.fake_input).bind("blur",h,function(b){var c=a(this).attr("data-default");return""!=a(b.data.fake_input).val()&&a(b.data.fake_input).val()!=c?b.data.minChars<=a(b.data.fake_input).val().length&&(!b.data.maxChars||b.data.maxChars>=a(b.data.fake_input).val().length)&&a(b.data.real_input).addTag(a(b.data.fake_input).val(),{focus:!0,unique:f.unique}):(a(b.data.fake_input).val(a(b.data.fake_input).attr("data-default")),a(b.data.fake_input).css("color",f.placeholderColor)),!1});a(h.fake_input).bind("keypress",h,function(b){return d(b)?(b.preventDefault(),b.data.minChars<=a(b.data.fake_input).val().length&&(!b.data.maxChars||b.data.maxChars>=a(b.data.fake_input).val().length)&&a(b.data.real_input).addTag(a(b.data.fake_input).val(),{focus:!0,unique:f.unique}),a(b.data.fake_input).resetAutosize(f),!1):void(b.data.autosize&&a(b.data.fake_input).doAutosize(f))}),h.removeWithBackspace&&a(h.fake_input).bind("keydown",function(b){if(8==b.keyCode&&""==a(this).val()){b.preventDefault();var c=a(this).closest(".tagsinput").find(".tag:last").text(),d=a(this).attr("id").replace(/_tag$/,"");c=c.replace(/[\s]+x$/,""),a("#"+d).removeTag(escape(c)),a(this).trigger("focus")}}),a(h.fake_input).blur(),h.unique&&a(h.fake_input).keydown(function(b){(8==b.keyCode||String.fromCharCode(b.which).match(/\w+|[áéíóúÁÉÍÓÚñÑ,/]+/))&&a(this).removeClass("not_valid")})}}}),this},a.fn.tagsInput.updateTagsField=function(c,d){var e=a(c).attr("id");a(c).val(d.join(b[e]))},a.fn.tagsInput.importTags=function(d,e){a(d).val("");var f=a(d).attr("id"),g=e.split(b[f]);for(i=0;i/g,">");g.html(h);var i=g.width(),j=i+b.comfortZone>=c?i+b.comfortZone:c;(j=c||j>c&&j").css({position:"absolute",top:-9999,left:-9999,width:"auto",fontSize:e.css("fontSize"),fontFamily:e.css("fontFamily"),fontWeight:e.css("fontWeight"),letterSpacing:e.css("letterSpacing"),whiteSpace:"nowrap"}),g=a(this).attr("id")+"_autosize_tester";!a("#"+g).length>0&&(f.attr("id",g),f.appendTo("body")),e.data("minwidth",c),e.data("maxwidth",d),e.data("tester_id",g),e.css("width",c)},a.fn.addTag=function(d,e){return e=jQuery.extend({focus:!1,callback:!0},e),this.each(function(){var f=(a(this).attr("data-inputdisabled"),a(this).attr("id")),g=a(this).val().split(b[f]);if(""==g[0]&&(g=new Array),d=jQuery.trim(d),e.unique){var h=a(this).tagExist(d);1==h&&a("#"+f+"_tag").addClass("not_valid")}else var h=!1;if(""!=d&&1!=h){if(a("").addClass("tag").append(a("").text(d).append("  "),a("",{href:"#",title:"Removing tag",text:"x"}).click(function(){return a("#"+f).removeTag(escape(d))})).insertBefore("#"+f+"_addTag"),g.push(d),a("#"+f+"_tag").val(""),e.focus?a("#"+f+"_tag").focus():a("#"+f+"_tag").blur(),a.fn.tagsInput.updateTagsField(this,g),e.callback&&c[f]&&c[f].onAddTag){var i=c[f].onAddTag;i.call(this,d)}if(c[f]&&c[f].onChange){var j=g.length,i=c[f].onChange;i.call(this,a(this),g[j-1])}}}),!1},a.fn.removeTag=function(d){return d=unescape(d),this.each(function(){if(!a(this).attr("data-inputdisabled")){var e=a(this).attr("id"),f=a(this).val().split(b[e]);for(a("#"+e+"_tagsinput .tag").remove(),str="",i=0;i=0},a.fn.importTags=function(b){var c=a(this).attr("id");a("#"+c+"_tagsinput .tag").remove(),a.fn.tagsInput.importTags(this,b)},a.fn.tagsInput=function(e){var f=jQuery.extend({interactive:!0,defaultText:"add a tag",minChars:0,width:"300px",height:"100px",autocomplete:{selectFirst:!1},hide:!0,delimiter:",",unique:!0,removeWithBackspace:!0,placeholderColor:"#666666",autosize:!0,comfortZone:20,inputPadding:12,honorDisabled:!1},e),g=0;return this.each(function(){if(void 0===a(this).attr("data-tagsinput-init")){a(this).attr("data-tagsinput-init",!0),f.hide&&a(this).hide();var e=a(this).attr("id");e&&!b[a(this).attr("id")]||(e=a(this).attr("id","tags"+(new Date).getTime()+g++).attr("id"));var h=f.honorDisabled&&"disabled"===a(this).attr("disabled");h&&a(this).attr("data-inputdisabled",!0);var i=jQuery.extend({pid:e,real_input:"#"+e,holder:"#"+e+"_tagsinput",input_wrapper:"#"+e+"_addTag",fake_input:"#"+e+"_tag"},f);b[e]=i.delimiter,(f.onAddTag||f.onRemoveTag||f.onChange)&&(c[e]=new Array,c[e].onAddTag=f.onAddTag,c[e].onRemoveTag=f.onRemoveTag,c[e].onChange=f.onChange);var j="tagsinput";h&&(j+=" inputdisabled");var k='
';if(f.interactive&&!h&&(k=k+''),k+='
',a(k).insertAfter(this),a(i.holder).css("width",f.width),a(i.holder).css("min-height",f.height),a(i.holder).css("height",f.height),""!=a(i.real_input).val()&&a.fn.tagsInput.importTags(a(i.real_input),a(i.real_input).val()),f.interactive&&!h){if(a(i.fake_input).val(a(i.fake_input).attr("data-default")),a(i.fake_input).css("color",f.placeholderColor),a(i.fake_input).resetAutosize(f),a(i.holder).bind("click",i,function(b){a(b.data.fake_input).focus()}),a(i.fake_input).bind("focus",i,function(b){a(b.data.fake_input).val()==a(b.data.fake_input).attr("data-default")&&a(b.data.fake_input).val(""),a(b.data.fake_input).css("color","#000000")}),void 0!=f.autocomplete_url){autocomplete_options={source:f.autocomplete_url};for(attrname in f.autocomplete)autocomplete_options[attrname]=f.autocomplete[attrname];void 0!==jQuery.Autocompleter?(a(i.fake_input).autocomplete(f.autocomplete_url,f.autocomplete),a(i.fake_input).bind("result",i,function(b,c,d){c&&a("#"+e).addTag(c[0]+"",{focus:!0,unique:f.unique})})):void 0!==jQuery.ui.autocomplete&&(a(i.fake_input).autocomplete(autocomplete_options),a(i.fake_input).bind("autocompleteselect",i,function(b,c){return a(b.data.real_input).addTag(c.item.value,{focus:!0,unique:f.unique}),!1}))}else a(i.fake_input).bind("blur",i,function(b){var c=a(this).attr("data-default");return""!=a(b.data.fake_input).val()&&a(b.data.fake_input).val()!=c?b.data.minChars<=a(b.data.fake_input).val().length&&(!b.data.maxChars||b.data.maxChars>=a(b.data.fake_input).val().length)&&a(b.data.real_input).addTag(a(b.data.fake_input).val(),{focus:!0,unique:f.unique}):(a(b.data.fake_input).val(a(b.data.fake_input).attr("data-default")),a(b.data.fake_input).css("color",f.placeholderColor)),!1});a(i.fake_input).bind("keypress",i,function(b){if(d(b))return b.preventDefault(),b.data.minChars<=a(b.data.fake_input).val().length&&(!b.data.maxChars||b.data.maxChars>=a(b.data.fake_input).val().length)&&a(b.data.real_input).addTag(a(b.data.fake_input).val(),{focus:!0,unique:f.unique}),a(b.data.fake_input).resetAutosize(f),!1;b.data.autosize&&a(b.data.fake_input).doAutosize(f)}),i.removeWithBackspace&&a(i.fake_input).bind("keydown",function(b){if(8==b.keyCode&&""==a(this).val()){b.preventDefault();var c=a(this).closest(".tagsinput").find(".tag:last").text(),d=a(this).attr("id").replace(/_tag$/,"");c=c.replace(/[\s]+x$/,""),a("#"+d).removeTag(escape(c)),a(this).trigger("focus")}}),a(i.fake_input).blur(),i.unique&&a(i.fake_input).keydown(function(b){(8==b.keyCode||String.fromCharCode(b.which).match(/\w+|[áéíóúÁÉÍÓÚñÑ,\/]+/))&&a(this).removeClass("not_valid")})}}}),this},a.fn.tagsInput.updateTagsField=function(c,d){var e=a(c).attr("id");a(c).val(d.join(b[e]))},a.fn.tagsInput.importTags=function(d,e){a(d).val("");var f=a(d).attr("id"),g=e.split(b[f]);for(i=0;i @@ -65,4 +70,7 @@

+

+

+ diff --git a/src/jquery.tagsinput.css b/src/jquery.tagsinput.css index c595e24..745ca7f 100644 --- a/src/jquery.tagsinput.css +++ b/src/jquery.tagsinput.css @@ -1,4 +1,5 @@ div.tagsinput { border:1px solid #CCC; background: #FFF; padding:5px; width:300px; height:100px; overflow-y: auto;} +div.tagsinput.inputdisabled span.tag a { cursor:default;} div.tagsinput span.tag { border: 1px solid #a5d24a; -moz-border-radius:2px; -webkit-border-radius:2px; display: block; float: left; padding: 5px; text-decoration:none; background: #cde69c; color: #638421; margin-right: 5px; margin-bottom:5px;font-family: helvetica; font-size:13px;} div.tagsinput span.tag a { font-weight: bold; color: #82ad2b; text-decoration:none; font-size: 11px; } div.tagsinput input { width:80px; margin:0px; font-family: helvetica; font-size: 13px; border:1px solid transparent; padding:5px; background: transparent; color: #000; outline:0px; margin-right:5px; margin-bottom:5px; } diff --git a/src/jquery.tagsinput.js b/src/jquery.tagsinput.js index b6c75e4..06c15b7 100644 --- a/src/jquery.tagsinput.js +++ b/src/jquery.tagsinput.js @@ -76,6 +76,7 @@ $.fn.addTag = function(value,options) { options = jQuery.extend({focus:false,callback:true},options); this.each(function() { + var disabled = $(this).attr('data-inputdisabled'); var id = $(this).attr('id'); var tagslist = $(this).val().split(delimiter[id]); @@ -88,24 +89,24 @@ if (options.unique) { var skipTag = $(this).tagExist(value); if(skipTag == true) { - //Marks fake input as not_valid to let styling it - $('#'+id+'_tag').addClass('not_valid'); - } + //Marks fake input as not_valid to let styling it + $('#'+id+'_tag').addClass('not_valid'); + } } else { var skipTag = false; } if (value !='' && skipTag != true) { - $('').addClass('tag').append( - $('').text(value).append('  '), - $('', { - href : '#', - title : 'Removing tag', - text : 'x' - }).click(function () { - return $('#' + id).removeTag(escape(value)); - }) - ).insertBefore('#' + id + '_addTag'); + $('').addClass('tag').append( + $('').text(value).append('  '), + $('', { + href : '#', + title : 'Removing tag', + text : 'x' + }).click(function () { + return $('#' + id).removeTag(escape(value)); + }) + ).insertBefore('#' + id + '_addTag'); tagslist.push(value); @@ -129,7 +130,6 @@ f.call(this, $(this), tagslist[i-1]); } } - }); return false; @@ -138,24 +138,27 @@ $.fn.removeTag = function(value) { value = unescape(value); this.each(function() { - var id = $(this).attr('id'); - - var old = $(this).val().split(delimiter[id]); - - $('#'+id+'_tagsinput .tag').remove(); - str = ''; - for (i=0; i< old.length; i++) { - if (old[i]!=value) { - str = str + delimiter[id] +old[i]; + var disabled = $(this).attr('data-inputdisabled'); + if (!disabled) { + var id = $(this).attr('id'); + + var old = $(this).val().split(delimiter[id]); + + $('#'+id+'_tagsinput .tag').remove(); + str = ''; + for (i=0; i< old.length; i++) { + if (old[i]!=value) { + str = str + delimiter[id] +old[i]; + } } - } - $.fn.tagsInput.importTags(this,str); + $.fn.tagsInput.importTags(this,str); - if (tags_callbacks[id] && tags_callbacks[id]['onRemoveTag']) { - var f = tags_callbacks[id]['onRemoveTag']; - f.call(this, value); - } + if (tags_callbacks[id] && tags_callbacks[id]['onRemoveTag']) { + var f = tags_callbacks[id]['onRemoveTag']; + f.call(this, value); + } + } }); return false; @@ -189,7 +192,8 @@ placeholderColor:'#666666', autosize: true, comfortZone: 20, - inputPadding: 6*2 + inputPadding: 6*2, + honorDisabled: false },options); var uniqueIdCounter = 0; @@ -207,9 +211,17 @@ $(this).hide(); } var id = $(this).attr('id'); + if (!id || delimiter[$(this).attr('id')]) { id = $(this).attr('id', 'tags' + new Date().getTime() + (uniqueIdCounter++)).attr('id'); } + + // check if input is disabled + var disabled = settings.honorDisabled && ($(this).attr('disabled') === 'disabled'); + + if (disabled) { + $(this).attr('data-inputdisabled', true); + } var data = jQuery.extend({ pid:id, @@ -228,9 +240,15 @@ tags_callbacks[id]['onChange'] = settings.onChange; } - var markup = '
'; + + var divclass = 'tagsinput'; + if (disabled) { + // add class to designate input as disabled + divclass = divclass + ' inputdisabled'; + } - if (settings.interactive) { + var markup = '
'; + if (settings.interactive && !disabled) { markup = markup + ''; } @@ -245,7 +263,7 @@ if ($(data.real_input).val()!='') { $.fn.tagsInput.importTags($(data.real_input),$(data.real_input).val()); } - if (settings.interactive) { + if (settings.interactive && !disabled) { $(data.fake_input).val($(data.fake_input).attr('data-default')); $(data.fake_input).css('color',settings.placeholderColor); $(data.fake_input).resetAutosize(settings);