diff --git a/README.md b/README.md index 4cd073d..7f6a3f1 100644 --- a/README.md +++ b/README.md @@ -11,4 +11,4 @@ Change Log ========== + 12/27/12 - Fixed bug where placeholder text was replacing set "value". This became evident when values where being set after a form was submitted and there were validation errors. - ++ 01/05/13 - Added workaround for inputs with type "password" diff --git a/placeMe-1.0.js b/placeMe-1.0.js index 87fcf17..40337a6 100755 --- a/placeMe-1.0.js +++ b/placeMe-1.0.js @@ -23,17 +23,52 @@ $(document).ready(function(){ { // The "placeholder" attribute isn't supported. Let's fake it. - var $placeholder = $(":input[placeholder]"); // Get all the input elements with the "placeholder" attribute + // Get all the input elements with the "placeholder" attribute + var $placeholder = $(":input[placeholder]"); // Go through each element and assign the "value" attribute the value of the "placeholder" // This will allow users with no support to see the default text $placeholder.each(function(){ - if($(this).attr("value") == "") { + + // The password input type in IE is masked, so the solution for other input types won't work. + // As a work around we'll create a new element and add it to the DOM. + // Once it's created we'll place it above the password feild to essentially "hide" it below our new element. + // When the new element is focused, we'll hide it revealing the actual password element. + if($(this).attr("type") == "password") { + // Get x position + var x = $(this).position().left; + // Get y position + var y = $(this).position().top; + // Get class attributes + var eclass = $(this).attr("class"); + // Get id attribute + var id = $(this).attr("id"); + // Get value + var val = $(this).attr("placeholder"); + // Get parent element + var parent = $(this).parent(); + + // Create new input and place it within the parent element + // Using CSS positioning we'll place it above the original element + // We'll also add a class of "placePass" to keep track of these new elements + $(parent).prepend(''); + + } + + // Make sure the value attribute is empty and not a password input + if(($(this).attr("value") == "") && ($(this).attr("type") != "password")) { + // Get value of the placeholder attribute var $message = $(this).attr("placeholder"); + // Put that value in the "value" attribute $(this).attr("value", $message); } }); + // When an element with a class of "placePass" is clicked, hide it. + $(".placePass").focus(function() { + $(this).hide(); + }); + // When a user clicks the input (on focus) the default text will be removed $placeholder.focus(function(){ var $value = $(this).attr("value"); @@ -51,7 +86,7 @@ $(document).ready(function(){ var $value = $(this).attr("value"); var $placeholderTxt = $(this).attr("placeholder"); - if($value == '') + if(($value == '') && ($(this).attr("type") != "password")) { $(this).attr("value", $placeholderTxt); }