toggle text color

**rabit** · 03-25-2010 06:58 PM

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');">

**Fang** · 03-26-2010 02:03 AM

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>

**rabit** · 03-26-2010 02:05 AM

Originally Posted by Fang

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: toggle text color

Thread Tools

Display

toggle text color

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions