diff --git a/README.md b/README.md index 5cad572..6a6a30a 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,5 @@ # HTML5 Placeholder jQuery Plugin -This plugin was based on a code snippet by [Paul Irish](http://paulirish.com/), featured in [jQuery 1.4 Hawtness #1](http://jquery14.com/day-05/jquery-1-4-hawtness-1-with-paul-irish). I added some functionality, did some optimizations here and there, and made a plugin out of it. - ## Demo & Examples [http://mathiasbynens.be/demo/placeholder](http://mathiasbynens.be/demo/placeholder) @@ -32,10 +30,10 @@ The plugin automatically adds `class="placeholder"` to the elements who are curr ## Notes * Works in all A-grade browsers, including IE6. -* The plugin automatically checks if the browser supports the HTML5 placeholder attribute for inputs natively. If this is the case, the plugin won’t do anything. +* The plugin automatically checks if the browser natively supports the HTML5 `placeholder` attribute for `input` and `textarea` elements. If this is the case, the plugin won’t do anything. If `@placeholder` is only supported for `input` elements, the plugin will only apply to `textarea`s. (This is the case for Safari 4.) ## Credits -Kudos to [Paul Irish](http://paulirish.com/) for his snippet and everyone from [#jquery](http://webchat.freenode.net/?channels=jquery) for the tips and ideas. +Kudos to [Paul Irish](http://paulirish.com/) for his inspiring snippet in [jQuery 1.4 Hawtness #1](http://jquery14.com/day-05/jquery-1-4-hawtness-1-with-paul-irish) and everyone from [#jquery](http://webchat.freenode.net/?channels=jquery) for the tips, ideas and patches. _– [Mathias](http://mathiasbynens.be/)_ \ No newline at end of file diff --git a/demo.html b/demo.html index a774553..c6f4fb7 100644 --- a/demo.html +++ b/demo.html @@ -36,9 +36,17 @@

HTML5 Placeholder jQuery Plugin

$('input, textarea').placeholder(); // That’s it, really. // Now display a message if the browser supports placeholder natively - if ('placeholder' in document.createElement('input')) { - $('

Your current browser supports placeholder natively. The plugin won’t run in this case, since it’s not needed. If you want to test the plugin, use an older browser ;)

').insertAfter('form'); - }; + var isInputSupported = 'placeholder' in document.createElement('input'), + isTextareaSupported = 'placeholder' in document.createElement('textarea'), + html; + if (isInputSupported && isTextareaSupported) { + html = 'Your current browser natively supports placeholder for input and textarea elements. The plugin won’t run in this case, since it’s not needed. If you want to test the plugin, use an older browser ;)'; + } else if (isInputSupported) { + html = 'Your current browser natively supports placeholder for input elements, but not for textarea elements. The plugin will only do its thang on the textareas.'; + } + if (html) { + $('

' + html + '

').insertAfter('form'); + } }); diff --git a/jquery.placeholder.js b/jquery.placeholder.js index 7795f3b..121377c 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -1,15 +1,23 @@ /*! - * HTML5 Placeholder jQuery Plugin v1.6 + * HTML5 Placeholder jQuery Plugin v1.7 * @link http://github.com/mathiasbynens/Placeholder-jQuery-Plugin * @author Mathias Bynens */ ;(function($) { - if ('placeholder' in document.createElement('input')) { + var isInputSupported = 'placeholder' in document.createElement('input'), + isTextareaSupported = 'placeholder' in document.createElement('textarea'); + if (isInputSupported && isTextareaSupported) { $.fn.placeholder = function() { return this; }; - return; + } else { + $.fn.placeholder = function() { + return this.filter((isInputSupported ? 'textarea' : ':input') + '[placeholder]') + .bind('focus.placeholder', clearPlaceholder) + .bind('blur.placeholder', setPlaceholder) + .trigger('blur.placeholder').end(); + }; } function args(elem) { @@ -78,11 +86,4 @@ $('.placeholder').val(''); }); - $.fn.placeholder = function() { - return this.filter(':input[placeholder]') - .bind('focus.placeholder', clearPlaceholder) - .bind('blur.placeholder' , setPlaceholder) - .trigger('blur.placeholder').end(); - }; - })(jQuery); \ No newline at end of file diff --git a/jquery.placeholder.min.js b/jquery.placeholder.min.js index cd02364..ff209e5 100644 --- a/jquery.placeholder.min.js +++ b/jquery.placeholder.min.js @@ -1,6 +1,6 @@ /*! - * HTML5 Placeholder jQuery Plugin v1.6 + * HTML5 Placeholder jQuery Plugin v1.7 * @link http://github.com/mathiasbynens/Placeholder-jQuery-Plugin * @author Mathias Bynens */ -(function(d){if('placeholder' in document.createElement('input')){d.fn.placeholder=function(){return this};return}function b(f){var e={},g=/^jQuery\d+$/;d.each(f.attributes,function(j,h){if(!g.test(h.name)){e[h.name]=h.value}});return e}function a(){var e=d(this);if(e.val()===e.attr('placeholder')&&e.hasClass('placeholder')){if(e.data('placeholder-password')){e.hide().next().show().focus()}else{e.val('').removeClass('placeholder')}}}function c(f){var i,h=d(this);if(h.val()===''||h.val()===h.attr('placeholder')){if(h.is(':password')){if(!h.data('placeholder-textinput')){try{i=h.clone().attr({type:'text'})}catch(g){i=d('').attr(d.extend(b(h[0]),{type:'text'}))}i.removeAttr('name').data('placeholder-password',true).bind('focus.placeholder',a);h.data('placeholder-textinput',i).before(i)}h=h.hide().prev().show()}h.addClass('placeholder').val(h.attr('placeholder'))}else{h.removeClass('placeholder')}}d(function(){d('form').bind('submit.placeholder',function(){var e=d('.placeholder',this).each(a);setTimeout(function(){e.each(c)},10)})});d(window).bind('unload.placeholder',function(){d('.placeholder').val('')});d.fn.placeholder=function(){return this.filter(':input[placeholder]').bind('focus.placeholder',a).bind('blur.placeholder',c).trigger('blur.placeholder').end()}})(jQuery); \ No newline at end of file +(function(f,z){var e=z in document.createElement('input'),a=z in document.createElement('textarea');if(e&&a){f.fn.placeholder=function(){return this}}else{f.fn.placeholder=function(){return this.filter((e?'textarea':':input')+'['+z+']').bind('focus.'+z,b).bind('blur.'+z,d).trigger('blur.'+z).end()}}function c(h){var g={},i=/^jQuery\d+$/;f.each(h.attributes,function(k,j){if(!i.test(j.name)){g[j.name]=j.value}});return g}function b(){var g=f(this);if(g.val()===g.attr(z)&&g.hasClass(z)){if(g.data(z+'-password')){g.hide().next().show().focus()}else{g.val('').removeClass(z)}}}function d(g){var j,i=f(this);if(i.val()===''||i.val()===i.attr(z)){if(i.is(':password')){if(!i.data(z+'-textinput')){try{j=i.clone().attr({type:'text'})}catch(h){j=f('').attr(f.extend(c(i[0]),{type:'text'}))}j.removeAttr('name').data(z+'-password',true).bind('focus.'+z,b);i.data(z+'-textinput',j).before(j)}i=i.hide().prev().show()}i.addClass(z).val(i.attr(z))}else{i.removeClass(z)}}f(function(){f('form').bind('submit.'+z,function(){var g=f('.'+z,this).each(b);setTimeout(function(){g.each(d)},10)})});f(window).bind('unload.'+z,function(){f('.'+z).val('')})})(jQuery,'placeholder'); \ No newline at end of file