diff --git a/README.rst b/README.rst index 5e656dc..644505f 100644 --- a/README.rst +++ b/README.rst @@ -6,15 +6,48 @@ Placeholder plugin for jQuery The HTML5 placeholder attribute is awesome, unfortunately only supported by some browsers. This plugin replicates the placeholder behavior for unsupported browsers. -- Checks for placeholder support before running -- Tested in IE (6,7,8). -- Works with password inputs +Compatibility: +^^^^^^^^^^^^^^ +IE 6+ +Firefox 3+ +Safari 3+ +Chrome ✓ +Opera ✓ +iPhone ✓ +Android ✓ + +*Please note* +The placeholder attribute should not be used as an alternative to a label. +http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#the-placeholder-attribute + +If you must hide labels, do it with JavaScript as you activate the placeholder. + Usage ===== It's easy!:: - $(':text[placeholder],:password[placeholder]').placeholder(); + $('input[placeholder], textarea[placeholder]').placeholder(); + +Enjoy. + +Styling +======= + +Native styling of HTML5 placeholders:: + + ::-webkit-input-placeholder {color: red;} + + :-moz-placeholder {color: red;} + +jQuery-Placeholder toggles a .placeholder class for browser that don't natively support placeholders:: + + .placeholder { color: red } + + +Credit +====== +Copyright 2011, Daniel Stocks ( http://webcloud.se ) -Enjoy. \ No newline at end of file +Thanks to Nikita Vasilyev and James Rosen for feedback and contribution. diff --git a/demo.html b/demo.html index 6212f77..f7fc02e 100644 --- a/demo.html +++ b/demo.html @@ -1,12 +1,15 @@ - - + + jQuery-Placeholder @@ -20,9 +23,15 @@

Demo form

+

+ +

+

+ +

\ No newline at end of file diff --git a/jquery.placeholder.js b/jquery.placeholder.js index a2c99d3..c7e66ee 100644 --- a/jquery.placeholder.js +++ b/jquery.placeholder.js @@ -1,73 +1,108 @@ -/* +/* * Placeholder plugin for jQuery -* @author Daniel Stocks (http://webcloud.se) -* @version 0.1 +* --- +* Copyright 2010, Daniel Stocks (http://webcloud.se) +* Released under the MIT, BSD, and GPL Licenses. */ - (function($) { function Placeholder(input) { - // Special treatment for password inputs + this.input = input; if (input.attr('type') == 'password') { - input.attr('realType', 'password'); - this.isPassword = true; + this.handlePassword(); } - this.input = input; - // IE doesn't allow changing the type of password inputs - this.fakePassword = $("").val(input.attr('placeholder')).focus(function() { - input.trigger("focus") - $(this).hide(); + // Prevent placeholder values from submitting + $(input[0].form).submit(function() { + if (input.hasClass('placeholder') && input[0].value == input.attr('placeholder')) { + input[0].value = ''; + } }); } Placeholder.prototype = { show : function(loading) { - // FF and IE saves values when you refresh the page. If the user refreshes the page with + // FF and IE saves values when you refresh the page. If the user refreshes the page with // the placeholders showing they will be the default values and the input fields won't be empty. - if (this.input[0].value == '' || (loading && this.valueIsPlaceholder())) { + if (this.input[0].value === '' || (loading && this.valueIsPlaceholder())) { if (this.isPassword) { - try { // IE doesn't allow us to change the input type + try { this.input[0].setAttribute('type', 'text'); } catch (e) { this.input.before(this.fakePassword.show()).hide(); } } - this.input[0].value = this.input.attr('placeholder'); this.input.addClass('placeholder'); + this.input[0].value = this.input.attr('placeholder'); } }, hide : function() { if (this.valueIsPlaceholder() && this.input.hasClass('placeholder')) { + this.input.removeClass('placeholder'); + this.input[0].value = ''; if (this.isPassword) { try { this.input[0].setAttribute('type', 'password'); } catch (e) { } // Restore focus for Opera and IE - this.input.show() + this.input.show(); this.input[0].focus(); } - this.input[0].value = ''; - this.input.removeClass('placeholder'); } }, valueIsPlaceholder : function() { return this.input[0].value == this.input.attr('placeholder'); + }, + handlePassword: function() { + var input = this.input; + input.attr('realType', 'password'); + this.isPassword = true; + // IE < 9 doesn't allow changing the type of password inputs + if ($.browser.msie && input[0].outerHTML) { + var fakeHTML = $(input[0].outerHTML.replace(/type=(['"])?password\1/gi, 'type=$1text$1')); + this.fakePassword = fakeHTML.val(input.attr('placeholder')).addClass('placeholder').focus(function() { + $(this).hide(); + input.show(); + input.trigger('focus'); + input.removeClass('placeholder'); + }); + $(input[0].form).submit(function() { + fakeHTML.remove(); + input.show() + }); + } } - } - var supported = !!("placeholder" in document.createElement( "input" )); - $.fn.extend({ - placeholder: function() { - return this.each(function() { - if(!supported) { - var input = $(this); - var placeholder = new Placeholder(input); - placeholder.show(true); - input.focus(function() { - placeholder.hide(); - }); - input.blur(function() { - placeholder.show(false); - }); - } + }; + var NATIVE_SUPPORT = !!("placeholder" in document.createElement( "input" )); + $.fn.placeholder = function() { + return NATIVE_SUPPORT ? this : this.each(function() { + var input = $(this); + var placeholder = new Placeholder(input); + placeholder.show(true); + input.focus(function() { + placeholder.hide(); }); - } - }); -})(jQuery); \ No newline at end of file + input.blur(function() { + placeholder.show(false); + }); + + // On page refresh, IE doesn't re-populate user input + // until the window.onload event is fired. + if ($.browser.msie) { + $(window).load(function() { + if(input.val()) { + input.removeClass("placeholder"); + } + placeholder.show(true); + }); + // What's even worse, the text cursor disappears + // when tabbing between text inputs, here's a fix + input.focus(function() { + if(this.value == "") { + var range = this.createTextRange(); + range.collapse(true); + range.moveStart('character', 0); + range.select(); + } + }); + } + }); + } +})(jQuery); diff --git a/jquery.placeholder.min.js b/jquery.placeholder.min.js new file mode 100644 index 0000000..389b16a --- /dev/null +++ b/jquery.placeholder.min.js @@ -0,0 +1,8 @@ +/* +* Placeholder plugin for jQuery +* --- +* Copyright 2010, Daniel Stocks (http://webcloud.se) +* Released under the MIT, BSD, and GPL Licenses. +*/ + +(function($){function Placeholder(input){this.input=input;if(input.attr("type")=="password"){this.handlePassword();}$(input[0].form).submit(function(){if(input.hasClass("placeholder")&&input[0].value==input.attr("placeholder")){input[0].value="";}});}Placeholder.prototype={show:function(loading){if(this.input[0].value===""||(loading&&this.valueIsPlaceholder())){if(this.isPassword){try{this.input[0].setAttribute("type","text");}catch(e){this.input.before(this.fakePassword.show()).hide();}}this.input.addClass("placeholder");this.input[0].value=this.input.attr("placeholder");}},hide:function(){if(this.valueIsPlaceholder()&&this.input.hasClass("placeholder")){this.input.removeClass("placeholder");this.input[0].value="";if(this.isPassword){try{this.input[0].setAttribute("type","password");}catch(e){}this.input.show();this.input[0].focus();}}},valueIsPlaceholder:function(){return this.input[0].value==this.input.attr("placeholder");},handlePassword:function(){var input=this.input;input.attr("realType","password");this.isPassword=true;if($.browser.msie&&input[0].outerHTML){var fakeHTML=$(input[0].outerHTML.replace(/type=(['"])?password\1/gi,"type=$1text$1"));this.fakePassword=fakeHTML.val(input.attr("placeholder")).addClass("placeholder").focus(function(){$(this).hide();input.show();input.trigger("focus");input.removeClass("placeholder");});$(input[0].form).submit(function(){fakeHTML.remove();input.show();});}}};var NATIVE_SUPPORT=!!("placeholder" in document.createElement("input"));$.fn.placeholder=function(){return NATIVE_SUPPORT?this:this.each(function(){var input=$(this);var placeholder=new Placeholder(input);placeholder.show(true);input.focus(function(){placeholder.hide();});input.blur(function(){placeholder.show(false);});if($.browser.msie){$(window).load(function(){if(input.val()){input.removeClass("placeholder");}placeholder.show(true);});input.focus(function(){if(this.value==""){var range=this.createTextRange();range.collapse(true);range.moveStart("character",0);range.select();}});}});};})(jQuery); \ No newline at end of file diff --git a/tests/IE_inputValue.html b/tests/IE_inputValue.html new file mode 100644 index 0000000..d36e4bb --- /dev/null +++ b/tests/IE_inputValue.html @@ -0,0 +1,20 @@ + + + + + IE input value + + +
+ +
+ + + \ No newline at end of file diff --git a/tests/IE_textcursor.html b/tests/IE_textcursor.html new file mode 100644 index 0000000..44a5831 --- /dev/null +++ b/tests/IE_textcursor.html @@ -0,0 +1,26 @@ + + + + + IE Text Cursor Test - jQuery-Placeholder + + +

IE Text Cursor Test

+

Related Ticket

+
+

With Placeholders

+

+

+

+

+

No placeholders

+

+

+

+

+
+ + + + + \ No newline at end of file diff --git a/tests/env-JS.html b/tests/env-JS.html new file mode 100644 index 0000000..6d04ba6 --- /dev/null +++ b/tests/env-JS.html @@ -0,0 +1,30 @@ + + + + + + + jQuery-Placeholder + + + +

jQuery-Placeholder

+

Env-JS test. Try setting the values with javascript and then submitting the form.

+
+

+ +

+

+ +

+
+ + + \ No newline at end of file diff --git a/tests/password.html b/tests/password.html new file mode 100644 index 0000000..c57688d --- /dev/null +++ b/tests/password.html @@ -0,0 +1,22 @@ + + + + + IE password field CSS test - jQuery Placeholder + + + +

IE password field CSS test - jQuery Placeholder

+ +

Input field should consistent in all browsers.

+ + + + + \ No newline at end of file