$('login_email').observe('click', function(event){
element = event.element()
element.value = '';
})
$('login_password').observe('click', function(event){
element = event.element()
element.value = '';
element.type = 'password';
element.focus()
})
$('login_email').observe('blur', function(event){
element = event.element()
if (element.value == ''){
element.value = 'Email';
}
})
$('login_password').observe('blur', function(event){
element = event.element()
if (element.value == ''){
element.type = 'text';
element.value = 'Password';
}
})
Refactorings
No refactoring yet !
Tj Holowaychuk
March 27, 2009, March 27, 2009 00:31, permalink
Just make one method for observing ALL inputs (or those with a specific class) to substitute the title attribute on blur. Look at jQuery for inspiration, there are many plugins that handle this gracefully, not sure about prototype, its just ugly overkill IMO
paul.wilkins.myopenid.com
March 27, 2009, March 27, 2009 02:57, permalink
Each form element retains their initial starting value as the defaultValue property.
We should be able to use a similar idea for the password type too.
function helperText($el) {
$el.observe('click', function(event) {
var element = event.element();
if (!element.defaultType) {
element.defaultType = element.type;
}
element.value = '';
if (element.type !== element.defaultType) {
element.type = element.defaultType;
element.focus();
}
});
$el.observe('blur', function(event) {
var element = event.element();
if (element.value == '') {
element.value = element.defaultValue;
if (element.type === 'password') {
element.type = 'text';
}
}
});
}
helperText($('login_email'));
helperText($('login_password'));
Vanson Samuel
March 29, 2009, March 29, 2009 18:46, permalink
/* Expecting inputs to have the following attributes: class, initialValue, and actualType
* Searches for inputs with the class set to resetting_inputs and sets them to an initial text value of initialValue
* On click blanks out the input and sets the type to actualType
* This script should be at the bottom of the page so that it gets executed last
* HTML Sample:
* <input class="resetting_inputs" initialValue="Email" actualType="text"/>
* <input class="resetting_inputs" initialValue="Password" actualType="password"/>
*/
function set_field(element, value, type) {
element.value = value;
element.type = type;
if (element.type == "password") {
element.focus()
}
}
function reset_field(element, force) {
if (element.value == '' || force) {
set_field(element, element.attributes.getNamedItem("initialValue").value, 'text');
}
}
$$(".resetting_inputs").each(function(element) {
element.observe('click', function(event) { set_field(event.element(), '', event.element().attributes.getNamedItem("actualType").value) });
element.observe('blur', function(event) { reset_field(event.element()) });
reset_field(element, true);
})
openid.aol.com/forwardfootmedia
May 8, 2009, May 08, 2009 00:00, permalink
Since your using prototype may want to try lowpro's event delegate. Lowpro just seems cleaner to me... This is just a stub, it may work... none the less it should give you the idea.
/* <form class="form_defaults">
* <input class="login_password"/>
* <input class="login_email"/>
*/
FormDefaults=Beahvior.create({
onclick:Event.delegate({
'.login_password':function(e){ this.restate({val:'',kind:'password',element:e}); }
'.login_email':function(e){ this.restate({val:'',kind:'text',element:e}) }
}),
onblur:Event.delegate({
'.login_password':function(e){ this.restate({val:'Password',kind:'text',element:e});}
'.login_email':function(e){ this.restate({val:'Email',kind:'text',element:e}) }
}),
restate:function(input){
input.element.value = input.val
input.element.type = input.kind ;
}
})
Event.addBehavior({
'.form_defaults': FormDefaults
});
Michael
July 6, 2009, July 06, 2009 16:19, permalink
Hi,
Do you deliver sales promotions to potential clients or newsletters to your current client base?
I can help you generating quite some traffic and income at a very afforable price.
Main reasons why work with WizMailer's advanced mailing system:
Results - will get all of your emails delivered to your clients' inbox.
Economical - low prices and the best ROI you can get when marketing online.
Automation - lists management, campaigns scheduling, statistics and autoresponder.
Optimized Design - design your newsletter online, preview and test deliverability.
For more information please visit http://www.mailer365.com
Yours Sincerely,
Michael Faust
Sales Manager
Wizmailer.
I'm thinking there's gotta be a way to refactor this code. I have other functions that set the default values for my login fields to 'Login' and 'Password' respectively. The functions are used to deal with keeping these default values if a user clicks away from a field without entering anything.