SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot ardit's Avatar
    Join Date
    Aug 2001
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Clear field text when clicked

    Hey there,

    I have a newsletter form with only one field where the users can enter their email. I have set as initial value "write your email here". Now I've seen somewhere where they have a filed in a form and have something preset and when you click it just lears so the user doesn't have to delete it manually. Is that possible and what code would achieve it...

    Thank you,
    Ardi

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,578
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <input onfocus="this.value=''" value="Enter Email" name="email" />

  3. #3
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A better option would be:

    <head> (or in a linked external js file)
    Code:
    <script type="text/javascript">
    	
    function formFocus() {
    
    thisObj = document.getElementById('userEmail');
    
    	if ( thisObj.value == 'write your email here' ) {
    	thisObj.value = ''; // two single quotes
    	} else {
    	if ( thisObj.value == '' ) // two single quotes
    	thisObj.value = 'write your email here';
    	}
    }
    	
    </script>
    <body>
    Code:
    ...
    
    <input type="text" id="userEmail" value="write your email here" onfocus="formFocus();" onblur="formFocus();" />
    
    ...
    This method improves on a straight clearance as the input field won't be cleared if the user has already typed something into it.
    Try it out and you'll see what I mean.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  4. #4
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    Since 'getElementById' is not recognized by all browsers, a safer solution would be to send the field object itself

    function formFocus(fldObj)
    {
    if ( fldObj.value == 'write your email here' )
    {
    fldObj.value = '';
    }
    ...
    ...
    ...
    <input type="text" ...onfocus="formFocus(this);" onblur="formFocus(this);" />

    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  5. #5
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure 'safer' really comes into when you're adding a non-critical effect such as this, but yes I see that your example is generally preferable.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  6. #6
    "Of" != "Have" bronze trophy Jeff Lange's Avatar
    Join Date
    Jan 2003
    Location
    Calgary, Canada
    Posts
    2,063
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could also make it so you can send it a value, and then make it reusable across multiple inputs.
    Who walks the stairs without a care
    It shoots so high in the sky.
    Bounce up and down just like a clown.
    Everyone knows its Slinky.

  7. #7
    SitePoint Zealot ardit's Avatar
    Join Date
    Aug 2001
    Posts
    111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dan Grossman example worked beautifully, it's just a good thing to have but not important at all when it comes to functionallity.

  8. #8
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Fwiw, ardit, I'd advise you to use Vincent Puglia's method for the same reasons I gave for offering mine.
    There are few more annoying behaviours for online forms than (mis)typing in an input field then going back to it to change a single character only to have the entire field blanked forcing you to type it all again.

    Do your users a favour and don't use Dan Grossman's indiscriminate method.
    (No offense meant, Dan)
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature


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
  •