Results 1 to 7 of 7

Thread: Clearing Textarea Default text

  1. #1
    Join Date
    Aug 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Clearing Textarea Default text

    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!

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    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>
    Jeremy | jfein.net

  3. #3
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Did this resolve your problem?
    Jeremy | jfein.net

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Does that get rid of spaces before it checks it? I'm confused to what \s does.
    Jeremy | jfein.net

  6. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    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
    Last edited by vwphillips; 02-22-2010 at 02:20 PM.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  7. The Following User Says Thank You to vwphillips For This Useful Post:

    Nile (02-23-2010)

  8. #7
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Ah... okay.
    Jeremy | jfein.net

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •