Log in

View Full Version : Clearing Textarea Default text


rmagnes
02-19-2010, 07:51 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!
Nile
02-19-2010, 10:15 PM
Put this in the <head> part of your document:


<script type="text/javascript">
var ids = [];
var blurfocus = function(id){
document.getElementById(id).onfocus = function(){
if(!ids[id]){ ids[id] = { id : id, val : this.value, active : false }; }
if(this.value == ids[id].val){
this.value = "";
}
};
document.getElementById(id).onblur = function(){
if(this.value == ""){
this.value = ids[id].val;
}
}
}
</script>

Then this as your textarea:


<textarea rows="15" cols="71" id="message">Your Message Goes Here.</textarea>
<script type="text/javascript">
blurfocus("message");
</script>
Nile
02-22-2010, 01:26 AM
Did this resolve your problem?
vwphillips
02-22-2010, 10:25 AM
perhapse?


<script type="text/javascript">

var blurfocus = function(id){
document.getElementById(id).onfocus = function(){
if(this.value == this.defaultValue){
this.value = "";
}
};
document.getElementById(id).onblur = function(){
var val=this.value.replace(/\s/g,'');
if(val == ""){
this.value = this.defaultValue;
}
}
}
</script>
Nile
02-22-2010, 12:51 PM
Does that get rid of spaces before it checks it? I'm confused to what \s does.
vwphillips
02-22-2010, 01:07 PM
Does that get rid of spaces before it checks it?

that is correct, trivial but I think important

however the reason I posted was for the use of the defaultValue
Nile
02-23-2010, 01:47 AM
Ah... okay.