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 8 of 8
  1. #1
    Regular Coder
    Join Date
    Sep 2005
    Posts
    153
    Thanks
    34
    Thanked 0 Times in 0 Posts

    Form Text Box problem

    Hi

    I've got a text box in a form that I want to have greyed out text and then disappears as the user enters their details in black. I found some code to do it but its starting out as black instead of grey.
    Can anyone help please?

    This is the part of the code I added to the form to get the result.

    <input type="text" name="s" id="s" value="Text to be displayed here"
    onfocus="if(this.value==this.defaultValue)this.value='';"
    onblur="if(this.value=='')this.value=this.defaultValue;"/>


    Thanks

  • #2
    New Coder
    Join Date
    May 2008
    Location
    Sydney, Australia
    Posts
    45
    Thanks
    0
    Thanked 8 Times in 8 Posts
    How bout this bit of CSS?

    Code:
    #s {color:#b3b3b3;}
    #s:focus {color:#000;}

  • #3
    Regular Coder
    Join Date
    Sep 2005
    Posts
    153
    Thanks
    34
    Thanked 0 Times in 0 Posts
    That works great except in Internet Explorer. Is there a tweak I can do for that browser?

    Otherwise, thanks so much for the code.

    Excellent work

    Paul

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Have a try with
    Code:
    #s:active,#s:focus {color:#000;}
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Sep 2005
    Posts
    153
    Thanks
    34
    Thanked 0 Times in 0 Posts
    Hi

    That doesn't seem to work either

    In IE the grey text disappears when you click in but what you type is also in grey

    In Firefox the text changes from grey to black but doesn't disappear.

    Hmmm..must be nearly there

    Cheers

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    How about
    Code:
    onfocus="if(this.value==this.defaultValue)this.value=''; this.style.color='#000';"
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Regular Coder
    Join Date
    Sep 2005
    Posts
    153
    Thanks
    34
    Thanked 0 Times in 0 Posts
    Brilliant...thats done it. Thanks a lot.

    I have only two other problems with it which maybe someone could help out.

    1) I've tried positioning it on the page and IE and Firefox display it differently. I've read about this before and can't find a clear method to use. I don't want to use absolute positioning as I have the main site content centered on the page.
    I really want to use relative positioning but the form 'naturally' sits in a different place in each browser. Furthermore on a previous version of IE, it pushes the below content down.
    Has anyone got a quick tip for controlling where you position a form?


    2) The other thing is to do with the index page which when a htm or html file you can reach it from just the web address ie www.website.com takes you to www.website.com/index.htm. But if your index page is a php page instead, how do you point the site to it?


    Thanks again everyone

    Paul

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    1) http://www.alistapart.com/articles/p...ccessibleforms may help.
    2)Change the DirectoyIndex orders in an htaccess file, see http://httpd.apache.org/docs/1.3/mod/mod_dir.html
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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