动态设置文本框颜色：
主要是利用javascript中的触发事件onfocus和onblur
<script language="javascript" type="text/javascript">
<!--
function myFocus(obj,color){
//判断文本框中的内容是否是默认内容
if(obj.value=="请输入收件人地址"){
obj.value="";
}
//设置文本框获取焦点时候背景颜色变换
obj.style.backgroundColor=color;
}
function myblur(obj,color){
//当鼠标离开时候改变文本框背景颜色
obj.style.background=color;
}
在input标签中：
<input type="text" name="username" id="username" onfocus="myFocus(this,'#f4eaf1')" onblur="myblur(this,'white')" value="请输入收件人地址"/>
用上述简单方法可以做到文本框背景颜色的变换和提示信息的清除
———————————————————————————————————————————————————————————————————
动态设置字体颜色
<html> <body> <script language="javascript" type="text/javascript"> function test(obj) { if( obj.value!="test" ){ document.getElementById("inputbox").className= "input_s1"; }else{ document.getElementById("inputbox").className = "input_s2"; } } </script> <style> .input_s1 {font-size:20;color:red; background-color:;border-top-1px; border-right- 1px; border-bottom- 1px; border-left- 1px} .input_s2 {font-size:20;color:black; background-color:;border-top-1px; border-right- 1px; border-bottom- 1px; border-left- 1px} </style> <center> <br> <form method="get" action="returnpage.php" > <input id="inputbox" type='text' class="input_s1" value="test" maxlength='300' size='40' name='qw' onclick="test(this)"/> <input type="submit" value="搜一下"> <br> </center> </body> </html>
—————————————————————————————————————————————————————————————————
自己修改的一个，功能：文本框默认字体浅色，获取焦点时候清空文本框，输入文字变黑色，失去焦点判断文本框，重新回到浅色字体
function test(obj) { if( obj.value!="CAS/NAME/CATALOG" ){ document.getElementById("productParam").value=""; document.getElementById("productParam").className="input_s2"; }else{ document.getElementById("productParam").value=""; document.getElementById("productParam").className ="input_s2"; } } function onBluet(obj){ if(obj.value == ""){ document.getElementById("productParam").value="CAS/NAME/CATALOG"; document.getElementById("productParam").className ="input_s1"; }else{ document.getElementById("productParam").className ="input_s1"; } } <style> .input_s1 {font-size:20;color:#949494; background-color:;border-top-1px; border-right- 1px; border-bottom- 1px; border-left- 1px} .input_s2 {font-size:20;color:black; background-color:;border-top-1px; border-right- 1px; border-bottom- 1px; border-left- 1px} </style> <input class="input_s1" id="productParam" name="productParam" onkeyup="enterLogin(event);" type="text" value="CAS/NAME/CATALOG" onclick="test(this)" onblur="onBluet(this)"/></td>