www.webdeveloper.com
Results 1 to 3 of 3

Thread: toggle text color

  1. #1
    Join Date
    Nov 2007
    Posts
    36

    toggle text color

    A friend of mine gave me a script that does exactly what I wanted. It adds reminder text to a text box when the page loads and onBlur if the box is empty. The only thing I want to change is I want the helper text to also have style=color:#888888 and the user text to have style=color:#000000.

    I'm a complete novice and I know the work is pretty much already done but I don't know how to add a style change onto this code in an efficient way. Thanks for any help.

    Code:
    <script language="javascript"> 
    function subType(a, b){ if(a.value==b){ a.value=''}else if(a.value==''){ a.value=b; }else{ a.value=a.value; } }
    function chkType(a, b){ if(a.value==''){ a.value=b; }else{ a.value=a.value; } }
    </script>
    
    
    
    <input name="subType" type="text" id="txtType" onfocus="subType(this, 'Sub Type');" onblur="chkType(this, 'Sub Type');" value="Sub Type">
     
    <input name="artist" type="text" id="txtEmail" value="Email" onfocus="subType(this, 'Email');" onblur="chkType(this, 'Email');">

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>clear</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    window.onload=function() {
    var searchSite = document.getElementById('searchSite');
    searchSite.onfocus = function() {if(this.value==this.defaultValue){this.value='';this.style.color='#000';}};
    searchSite.onblur = function() {if(this.value==''){this.value=this.defaultValue;this.style.color='#888';}};
    };
    </script>
    
    <style type="text/css">
    * {margin:0;padding:0;}
    #searchSite {color:#888;}
    </style>
    
    </head>
    <body>
    <form action="#" name="form1">
    <div>
        <label>
            <input id="searchSite" name="searchSite" type="text" value="Search my site">
        </label>
    </div>
    </form>
    </body>
    </html>
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Nov 2007
    Posts
    36
    Quote Originally Posted by Fang View Post
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>clear</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    window.onload=function() {
    var searchSite = document.getElementById('searchSite');
    searchSite.onfocus = function() {if(this.value==this.defaultValue){this.value='';this.style.color='#000';}};
    searchSite.onblur = function() {if(this.value==''){this.value=this.defaultValue;this.style.color='#888';}};
    };
    </script>
    
    <style type="text/css">
    * {margin:0;padding:0;}
    #searchSite {color:#888;}
    </style>
    
    </head>
    <body>
    <form action="#" name="form1">
    <div>
        <label>
            <input id="searchSite" name="searchSite" type="text" value="Search my site">
        </label>
    </div>
    </form>
    </body>
    </html>
    Argh! I was so close. Thanks a ton very much appreciated.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles