Merge pull request #6 from michael87/master

Added blur support

README.markdown

@@ -11,6 +11,7 @@ Demo
 Features
 --------
 * _New!_ Supports full integration with jQuery UI Autocomplete plug-in. Try typing some programming languages into the demo.
+* _New!_ Supports blur action. After blur create a tag
 * Configurable keys to create a tag
 * Backspace on empty field deletes last tag
 * Public methods to add and remove tags programatically
@@ -75,4 +76,8 @@ Available options and their defaults are:
 
 * Placeholder text
 
-        $('textarea').( {addTagPrompt: 'add tags'} );
+        $('textarea').( {addTagPrompt: 'add tags'} );
+        
+* Blur action for creating tags
+
+        $('textarea').( {addTagOnBlur: true} );

demo/jquery.tagify.js

@@ -4,10 +4,11 @@
 
 	$.widget("ui.tagify", {
 		options: {
-			delimiters: [13, 188],          // what user can type to complete a tag in char codes: [enter], [comma]
+			delimiters: [13, 188, 44],          // what user can type to complete a tag in char codes: [enter], [comma]
 			outputDelimiter: ',',           // delimiter for tags in original input field
 			cssClass: 'tagify-container',   // CSS class to style the tagify div and tags, see stylesheet
-			addTagPrompt: 'add tags'        // placeholder text
+			addTagPrompt: 'add tags',       // placeholder text
+			addTagOnBlur: false				// Add a tag on blur when not empty
 		},
 
 		_create: function() {
@@ -52,6 +53,21 @@
 						return;
 					}
 				});
+
+			// Add tags blur event when required	
+			if (opts.addTagOnBlur) {
+				// When needed, add tags on blur
+				this.tagInput.blur( function(e) {
+					var $this = $(this);
+
+					// if lose focus on input field, check if length is empty
+					if ('' !== $this.val()) {
+						self.add( $this.val() );
+						e.preventDefault(); 
+						return false;
+					}
+				});
+			}	
 
 			this.tagDiv = $("<div></div>")
 			    .addClass( opts.cssClass )

jquery.tagify.js

@@ -4,10 +4,11 @@
 
 	$.widget("ui.tagify", {
 		options: {
-			delimiters: [13, 188],          // what user can type to complete a tag in char codes: [enter], [comma]
+			delimiters: [13, 188, 44],          // what user can type to complete a tag in char codes: [enter], [comma]
 			outputDelimiter: ',',           // delimiter for tags in original input field
 			cssClass: 'tagify-container',   // CSS class to style the tagify div and tags, see stylesheet
-			addTagPrompt: 'add tags'        // placeholder text
+			addTagPrompt: 'add tags',       // placeholder text
+			addTagOnBlur: false				// Add a tag on blur when not empty
 		},
 
 		_create: function() {
@@ -52,6 +53,21 @@
 						return;
 					}
 				});
+
+			// Add tags blur event when required	
+			if (opts.addTagOnBlur) {
+				// When needed, add tags on blur
+				this.tagInput.blur( function(e) {
+					var $this = $(this);
+
+					// if lose focus on input field, check if length is empty
+					if ('' !== $this.val()) {
+						self.add( $this.val() );
+						e.preventDefault(); 
+						return false;
+					}
+				})
+			}	
 
 			this.tagDiv = $("<div></div>")
 			    .addClass( opts.cssClass )