js动态设置输入框字体/颜色

动态设置文本框颜色:
主要是利用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="请输入收件人地址"/>

用上述简单方法可以做到文本框背景颜色的变换和提示信息的清除

转自:http://blog.sina.com.cn/s/blog_78c47a0d0100qiia.html

 

动态设置字体颜色
<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-width:1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}  
  .input_s2 {font-size:20;color:black; background-color:;border-top-width:1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 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>

转自:http://topic.csdn.net/u/20080804/19/dec089b3-59e5-481c-b5d8-b4e3c4949078.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-width:1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px} 
  .input_s2 {font-size:20;color:black; background-color:;border-top-width:1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 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>


 

你可能感兴趣的:(JavaScript,c,function,Class,input,action)