From af1726fb7c9b7efb17325a77a78d7cba31f2a7a7 Mon Sep 17 00:00:00 2001 From: unknown <784894256@qq.com> Date: Mon, 29 Dec 2014 21:05:44 +0800 Subject: [PATCH 1/2] fix layout bug in ie --- css/input_tag.css | 4 +++- input_tag.html | 1 + 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/css/input_tag.css b/css/input_tag.css index 2f478b1..03662f0 100644 --- a/css/input_tag.css +++ b/css/input_tag.css @@ -16,12 +16,14 @@ -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); } -.input-tag>* { +.input-tag div { vertical-align: middle; display: inline-block; margin: 2px; line-height: inherit; font-size: inherit; + *display:inline; + *zoom:1; } .input-text{ padding: 1px; diff --git a/input_tag.html b/input_tag.html index 98749d7..721efc8 100644 --- a/input_tag.html +++ b/input_tag.html @@ -3,6 +3,7 @@ input-tag demo +
From b93df4d7c1d22d2f3d76714f09a1608102510227 Mon Sep 17 00:00:00 2001 From: unknown <784894256@qq.com> Date: Mon, 29 Dec 2014 23:23:49 +0800 Subject: [PATCH 2/2] select a tag and delete it --- js/input_tag.js | 80 ++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 69 insertions(+), 11 deletions(-) diff --git a/js/input_tag.js b/js/input_tag.js index c9cfaf7..1c70493 100644 --- a/js/input_tag.js +++ b/js/input_tag.js @@ -3,9 +3,17 @@ $.fn.extend({inputtag: function(){ var self = this; var input_text = self.children('.input-text'); var input_field = self.children('.input-field'); + var isDelSelectedTagsEventSet = false; - self.click(function(){ - input_text.focus(); + self.click(function(e){ + var target = getEventTarget(e); + if(!$(target).hasClass('tag')){ + resetSelectedTags(); + input_text.focus(); + } + }).delegate('.tag', 'click', function(){ + resetSelectedTags(); + selectTag($(this)); }); input_text.focus(function(){ @@ -14,12 +22,23 @@ $.fn.extend({inputtag: function(){ self.removeClass('focus'); }); - input_text.keydown(function(e){ + $(document).click(function(e){ + var target = getEventTarget(e); + var selefElements = self.find('*').add(self); + if($.inArray(target, selefElements) == -1){ + resetSelectedTags(); + detachDelSelectedTagsEvent(); + } + else{ + attachDelSelectedTagsEvent(); + } + }); + input_text.keydown(function(e){ //enter key or comma: to finish a tag if(e.keyCode == 13 || e.keyCode == 188){ - e.preventDefault(); + preventDefault(e); var tag_content = $(this).val(); if(!tag_content){ @@ -27,23 +46,18 @@ $.fn.extend({inputtag: function(){ } var tag = $('
').text( tag_content ); - var tag_types = ['primary', 'success', 'info', 'warning']; - var tag_type_index = Math.floor( Math.random()*(tag_types.length-1) ); - var tag_type = tag_types[tag_type_index]; - tag.addClass('tag-'+tag_type); - + tag.addClass('tag-primary'); $(this).before(tag); $(this).val(''); } if(e.keyCode == 8){//delete key: to remove a tag + if($(this).val().length == 0){ $(this).siblings('.tag').last().remove(); } } - input_field.val(); - var arr = []; self.children('.tag').each(function(){ arr.push($(this).text()) @@ -59,4 +73,48 @@ $.fn.extend({inputtag: function(){ width_helper.text( $(this).val() ); $(this).width( width_helper.width()+40 ); }); + + function attachDelSelectedTagsEvent(){ + if(isDelSelectedTagsEventSet){ + return; + } + $(document).bind('keydown.delSelectedTags', function(e){ + if(e.keyCode == 8){ + if(!self.hasClass("focus")){ + preventDefault(); + $('.tag-warning', self).remove(); + } + } + }); + isDelSelectedTagsEventSet = true; + } + + function detachDelSelectedTagsEvent(){ + $(document).unbind('keydown.delSelectedTags'); + isDelSelectedTagsEventSet = false; + } + + function resetSelectedTags(){ + $('.tag-warning', self).removeClass('tag-warning').addClass('tag-primary'); + } + + function selectTag($tag){ + $tag.addClass('tag-warning').removeClass('tag-primary'); + } + + function getEventTarget(e){ + var evt = e || window.event; + return evt.target || evt.srcElement; + } + + function preventDefault(e){ + var evt = e || window.event; + if(evt.preventDefault){ + evt.preventDefault(); + } + else{ + evt.returnValue = false; + } + } + }}); \ No newline at end of file