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:

Code:

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:

HTML Code:

<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:

Code:

<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:

Code:

<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?

Code:

<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>