Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    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]
    <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>
    [/HTML]

    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
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,879
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    Try this:
    Code:
    <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    fangonk (02-19-2010)

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    is this valid? If not, should I care?

  • #4
    Regular Coder
    Join Date
    Jan 2006
    Posts
    568
    Thanks
    6
    Thanked 84 Times in 84 Posts
    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.
    Last edited by gusblake; 02-19-2010 at 08:46 PM.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,879
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Quote Originally Posted by Old Pedant View Post
    Try this:
    Code:
    <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.

    Code:
    <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>
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • Users who have thanked glenngv for this post:

    Old Pedant (02-20-2010)

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,879
    Thanks
    79
    Thanked 4,421 Times in 4,386 Posts
    Thanks! I keep forgetting about defaultValue. Dunno why.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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