diff --git a/README.markdown b/README.markdown index 977d83c..9989bca 100644 --- a/README.markdown +++ b/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'} ); \ No newline at end of file + $('textarea').( {addTagPrompt: 'add tags'} ); + +* Blur action for creating tags + + $('textarea').( {addTagOnBlur: true} ); \ No newline at end of file diff --git a/demo/jquery.tagify.js b/demo/jquery.tagify.js index 81bb0e4..e182fdc 100755 --- a/demo/jquery.tagify.js +++ b/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 = $("
") .addClass( opts.cssClass ) diff --git a/jquery.tagify.js b/jquery.tagify.js index 81bb0e4..324b3ea 100755 --- a/jquery.tagify.js +++ b/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 = $("
") .addClass( opts.cssClass )