SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard
    Join Date
    Oct 2004
    Location
    Newport Beach
    Posts
    1,760
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    onFocus Only Once?

    I have a textarea in a form that has a value given to it as an instruction to the user.

    When you click into the textarea I have onfocus="this.value='';" to remove the information and allow the user to begin typing their message.

    How can I have the onfocus run only once? If the person were to click away from the textarea and then click back they will erase whatever they have written.

    Thanks
    Ryan
    Upcoming Movies - Movie News. Updated Daily.
    Movie Trailers - Awesome trailer site. Nuff said.

  2. #2
    SitePoint Wizard bronze trophy Kailash Badu's Avatar
    Join Date
    Nov 2005
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There could be many ways to that. One that comes to mind is: (For simplicity I am using inline inline event handler).
    register the function clearTextArea() function as event handler for onfocus on the textarea.
    Code HTML:
    <textarea name="text" onfocus="clearTextArea()"></textarea>

    Now define the function clearTextArea as:
    Code JavaScript:
    function clearTextArea(){
        //original text that contains the instruction
        var orgText = 'Please Enter Your Address';
     
        //check what text the textarea holds,
        if (this.value == orgText) {
            //if it holds the original instruction, do nothing
            return;
        }
        else {
            //else clear everything
            this.value = '';    
        }
    }

  3. #3
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kailash Badu View Post
    Code JavaScript:
    function clearTextArea(){
        //original text that contains the instruction
        var orgText = 'Please Enter Your Address';
     
        //check what text the textarea holds,
        if (this.value == orgText) {
            //if it holds the original instruction, do nothing
            return;
        }
        else {
            //else clear everything
            this.value = '';    
        }
    }
    Isn't that back to front?

    Code:
    onfocus="if(this.value==this.defaultValue)this.value=''"
    Tab-indentation is a crime against humanity.

  4. #4
    SitePoint Wizard bronze trophy Kailash Badu's Avatar
    Join Date
    Nov 2005
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Never tested it. In the hindsight, you are right.
    Code JavaScript:
    function clearTextArea(){
        //original text that contains the instruction
        var orgText = this.defaultValue;
     
        //check what text the textarea holds,
        if (this.value == orgText) {
            //if it holds the original instruction, clear it
            this.value = ''; 
        }
        return;
    }

    Off course, your one is more succinct.

  5. #5
    SitePoint Member
    Join Date
    Nov 2007
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I suggest you also use the OnBlur event to insert the default text back into the text area control if they leave the control and if they did not enter anything.

    That way they have the instructions again if they skip back to this control after entering it the first time.


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
  •