Created
September 15, 2011 18:04
-
-
Save jcolebrand/1219990 to your computer and use it in GitHub Desktop.
Just a thing I did ~ "ghost text"
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.untouched { | |
color: #777; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//ensure that this is already defined somewhere in the page before getting to this point, or just put it in here now. | |
if (typeof jQuery.support.placeholder == 'undefined') jQuery.support.placeholder = ('placeholder' in document.createElement('input')); | |
// disposable function wrapper that takes an element and monitors it for certain text and applies a class. | |
// requires the class "untouched" to be defined as well. Call it once per item to be applied to. | |
// should be called once on page load, expects parameter array like this: | |
// [{ element: 'selector' }, | |
// { element: 'selector', text: 'text' }, | |
// { element: 'selector', text: 'text', class: 'someclass' }, | |
// { element: 'selector', text: 'text', class: 'someclass', callback: function(){} } | |
// ] | |
// class will use "untouched" if no class provided, and "Search" if no text provided. | |
// Can also take a callback function and will pass the value of the element that's selected, and a reference to the element itself | |
(function (elements) { | |
for (var k in elements) { | |
var e = elements[k]; | |
(function ($, id, text, ec, ecb, kcb, bcb) { | |
$(function () { | |
if ($.support.placeholder){ | |
$(id).attr('placeholder',text); | |
} else { | |
$(id) | |
.click(Click) | |
.focus(Focus) | |
.blur(Blur) | |
.blur(); | |
} | |
$(id) | |
.keypress(Keypress) | |
.keyup(Keyup); | |
}); | |
function Click(event) { | |
var that = $(this) | |
if (that.hasClass(ec) && that.val() === text) { | |
that.removeClass(ec).val(''); | |
} | |
} | |
function Focus(event) { | |
var that = $(this) | |
if (that.hasClass(ec) && that.val() === text) { | |
that.removeClass(ec).val(''); | |
} | |
} | |
function Blur(event) { | |
var that = $(this), | |
val = that.val(), | |
aux = 0; | |
if (!that.hasClass(ec) && (val === text || val === '')) { | |
that.addClass(ec).val(text); | |
} else { | |
that.removeClass(ec); | |
} | |
} | |
function Keypress(event) { | |
var that = $(this), | |
val = that.val(), | |
aux = 0; | |
/* if they press enter */ | |
if (event.which === 13) { | |
/* do something here to search for the value and redirect */ | |
if (typeof (ecb) === 'function') { | |
event.preventDefault(); | |
ecb.call(that, event, val); | |
return false; | |
} | |
} | |
if (typeof kcb === 'function') { | |
kcb.call(that, event, val); | |
return; | |
} | |
} | |
function Keyup(event) { | |
var that = $(this) | |
/* if they pressed esc and the input was empty */ | |
if (event.which === 27 && !that.val()){ | |
return; | |
} | |
/* if they pressed esc */ | |
if (event.which === 27) { | |
that.val(''); | |
} | |
if (typeof kcb === 'function') { | |
kcb.call(that, event, that.val()); | |
} | |
/* if they pressed esc */ | |
if (event.which === 27) { | |
event.preventDefault(); | |
return false; | |
} | |
} | |
})(window.jQuery, e.element, e.text || 'placeholder value', e.eclass || 'untouched', e.enterCallback || function(){}, e.keypressCallback || function(){}, e.blurCallback || function(){}); | |
} | |
})([ | |
{ element: '#field_1_Id', text: 'placeholder text' }, | |
{ element: '#field_2_Id', text: 'placeholder text' } | |
]); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment