Skip to content

Commit

Permalink
Password input workaround
Browse files Browse the repository at this point in the history
  • Loading branch information
mattsparks committed Jan 5, 2013
1 parent 708ff98 commit b2623c5
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 4 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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"
41 changes: 38 additions & 3 deletions placeMe-1.0.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 <input type="text"> 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('<input type="text" id="'+id+'" class="'+eclass+' placePass" value="'+val+'" style="position: absolute; top: '+y+' left: '+x+' z-index: 9999;">');

}

// 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");
Expand All @@ -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);
}
Expand Down

0 comments on commit b2623c5

Please sign in to comment.