Skip to content

Commit

Permalink
Cleaned up code, added textarea support, Fixes #2
Browse files Browse the repository at this point in the history
  • Loading branch information
@mattsparks
mattsparks committed Jul 12, 2013
1 parent b2623c5 commit 9be2485
Show file tree
Hide file tree
Showing 2 changed files with 118 additions and 111 deletions.
1 change: 1 addition & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,3 +12,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"
+ 07/11/13 - Cleaned up code, added support for <textarea>
228 changes: 117 additions & 111 deletions placeMe-1.0.js → placeMe.js
100755 → 100644
View file
Original file line number Diff line number Diff line change
@@ -1,111 +1,117 @@
/**
* placeMe.js - A jQuery polyfill for the placeholder attribute.
*
* @author Matt Sparks <matt@mattsparks.com>
* @license Unlicense <http://unlicense.org/>
*/

$(document).ready(function(){

//Check to see if placeholder is supported
//Hat tip: http://diveintohtml5.info/detect.html#input-placeholder
function supports_input_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}

if(supports_input_placeholder())
{
// The placeholder attribute is supported
//Do nothing. Smile. Go outside
}
else
{
// The "placeholder" attribute isn't supported. Let's fake it.

// 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(){

// 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");
var $placeholderTxt = $(this).attr("placeholder");

if($value == $placeholderTxt)
{
$(this).attr("value", "");
}
});

// When a user clicks/tabs away from the input (on blur) keep what they typed
// Unless they didn't type anything, in that case put back in the default text
$placeholder.blur(function(){
var $value = $(this).attr("value");
var $placeholderTxt = $(this).attr("placeholder");

if(($value == '') && ($(this).attr("type") != "password"))
{
$(this).attr("value", $placeholderTxt);
}
});

// Since we're inputing text into the "value" attribute we need to make
// sure that this default text isn't submitted with the form, potentially
// causing validation issues. So we're going to remove the default text
// and submit the inputs as blank.
$("form").submit(function(){
var $checkValue = $(":input");

$checkValue.each(function() {
if($(this).attr("value") == $(this).attr("placeholder"))
{
$(this).attr("value", "");
}
});
});
}

});
/**
* placeMe.js - A jQuery polyfill for the placeholder attribute.
*
* @author Matt Sparks <matt@mattsparks.com>
* @license Unlicense <http://unlicense.org/>
*/

$(function() {

//Check to see if placeholder is supported
//Hat tip: http://diveintohtml5.info/detect.html#input-placeholder
function supports_input_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}

if(supports_input_placeholder())
{
// The placeholder attribute is supported
//Do nothing. Smile. Go outside
}
else
{
// The "placeholder" attribute isn't supported. Let's fake it.

// Get all the input elements with the "placeholder" attribute
var $placeholder = $("[placeholder]");

// Go through each element and assign the value to the value of the "placeholder" attribute
// This will allow users with no support to see the default text
$placeholder.each(function(){

// The element we're working with.
var $this = $(this),
// Get value
val = $this.attr("placeholder");

// 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. This solution is
// by no means perfect, but will work well enough.
if($this.attr("type") == "password") {
// Get x position
var x = $this.position().left,
// Get y position
y = $this.position().top,
// Get class attributes
eClass = $this.attr("class") ? $this.attr("class") : '',
// Get id attribute
id = $this.attr("id") ? $this.attr("id") : '',
// Get parent element
parent = $this.parent(),
// The new element
el = '<input type="text" id="'+id+'" class="'+eClass+' placePass" value="'+val+'" style="position: absolute; top: '+y+'px; left: '+x+'px; z-index: 9999;">';

// 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(el);

}

// Make sure the value attribute is empty and not a password input
if(($this.val() == "") && ($this.attr("type") != "password")) {
// Put value
$this.val(val);
}
});

// 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 $this = $(this),
value = $this.val(),
placeholderTxt = $this.attr("placeholder");

if(value == placeholderTxt)
{
$this.val("");
}
});

// When a user clicks/tabs away from the input (on blur) keep what they typed
// Unless they didn't type anything, in that case put back in the default text
$placeholder.blur(function(){
var $this = $(this),
value = $this.val(),
placeholderTxt = $this.attr("placeholder");

if((value == '') && ($this.attr("type") != "password"))
{
$this.val(placeholderTxt);
}
});

// Since we're inputing text into the "value" attribute we need to make
// sure that this default text isn't submitted with the form, potentially
// causing validation issues. So we're going to remove the default text
// and submit the inputs as blank.
$("form").submit(function(){
var $input = $(":input");

$input.each(function() {
if($this.val() == $this.attr("placeholder"))
{
$this.val("");
}
});
});
}

});

0 comments on commit 9be2485

Please sign in to comment.