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

来源：互联网发布：白夜追凶网络剧编辑：程序博客网时间：2024/05/16 05:34

[html] view plaincopy
动态设置文本框颜色：  

[html] view plaincopy
主要是利用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] view plaincopy
动态设置字体颜色  

[html] view plaincopy
<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>  
  
转自：<a href="http://topic.csdn.net/u/20080804/19/dec089b3-59e5-481c-b5d8-b4e3c4949078.html">http://topic.csdn.net/u/20080804/19/dec089b3-59e5-481c-b5d8-b4e3c4949078.html</a>  

自己修改的一个，功能：文本框默认字体浅色，获取焦点时候清空文本框，输入文字变黑色，失去焦点判断文本框，重新回到浅色字体

转载自：http://blog.csdn.net/yy_2011/article/details/7663342

0 0