...

View Full Version : Clearing Textarea Default text



fangonk
02-19-2010, 09:26 PM
I need to clear the default value from a textarea when a user clicks on the textarea and then replace it if the user clicks away from the textarea without modifying it. I have managed to accomplish this with the textfields in my forms but I am struggling to get the textarea element to mimic this behavior.

Here is the script I am using:


addEvent(window, 'load', init, false);

function init() {
var formInputs = document.getElementsByTagName('input');
for (var i = 0; i < formInputs.length; i++) {
var theInput = formInputs[i];

if (theInput.type == 'text' && theInput.className.match(/\binput\b/)) {
/* Add event handlers */
addEvent(theInput, 'focus', inputText, false);
addEvent(theInput, 'blur', replaceDefaultText, false);

/* Save the current value */
if (theInput.value != '') {
theInput.defaultText = theInput.value;
}
}
}
}

function inputText(e) {
var target = window.event ? window.event.srcElement : e ? e.target : null;
if (!target) return;

if (target.value == target.defaultText) {
target.value = '';
}
}

function replaceDefaultText(e) {
var target = window.event ? window.event.srcElement : e ? e.target : null;
if (!target) return;

if (target.value == '' && target.defaultText) {
target.value = target.defaultText;
}
}

HTML:


<form action="#">
<fieldset>
<legend></legend>
<input type="text" value="Your Name" id="name" class="input" />
<label for="name">Name Required</label><br/>
<input type="text" value="Your Email" id="email" class="input"/>
<label for="email">E-mail Required</label><br/>
<input type="text" value="Your Website" id="website" class="input"/>
<label for="website">Website</label>
<textarea rows="15" cols="71">Your Message Goes Here.</textarea>
<input type="submit" value="Submit Comment" class="button" />
</fieldset>
</form>


I am really just trying to get this form to behave the way all other forms on the internet work- where text clears when a user clicks on a form element and replaces itself if the user doesn't enter new text. I have it working on the text field but no the textarea. Help!

Old Pedant
02-19-2010, 09:38 PM
Try this:

<textarea rows="15" cols="71"
onfocus="if (this.value=='Your Message Goes Here.') this.value='';"
onblur="if (this.value.replace(/\s/g,'')=='') this.value='Your Message Goes Here.';"
>Your Message Goes Here.</textarea>

Simple. Not overly elegant. But it should work.

fangonk
02-19-2010, 09:39 PM
is this valid? If not, should I care?

gusblake
02-19-2010, 09:43 PM
You just need to make the init function go over the textareas as well as the inputs. You can pretty much copy the for loop, but with getElementsByTagName("textarea") instead of "input" (and obviously don't check if the type=="text").

Edit - Old Pedant's code is perfectly valid, but you will have to add it to each textarea yourself.

Old Pedant
02-19-2010, 10:10 PM
It's also considered inelegant by some people to have the JS events showing in the HTML. I'm not a purist, but if you are then don't do it my way.

glenngv
02-20-2010, 03:43 AM
Try this:

<textarea rows="15" cols="71"
onfocus="if (this.value=='Your Message Goes Here.') this.value='';"
onblur="if (this.value.replace(/\s/g,'')=='') this.value='Your Message Goes Here.';"
>Your Message Goes Here.</textarea>

Simple. Not overly elegant. But it should work.
Text controls have defaultValue property (select controls have defaultSelected, checkboxes have defaultChecked). You don't have to specify 'Your Message Goes Here' multiple times.


<textarea rows="15" cols="71"
onfocus="if (this.value==this.defaultValue) this.value='';"
onblur="if (this.value.replace(/\s/g,'')=='') this.value=this.defaultValue;"
>Your Message Goes Here.</textarea>

Old Pedant
02-20-2010, 09:00 PM
Thanks! I keep forgetting about defaultValue. Dunno why.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum