zoukankan      html  css  js  c++  java
  • 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="请输入收件人地址"/>  

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

    ———————————————————————————————————————————————————————————————————

    动态设置字体颜色 

    <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>
  • 相关阅读:
    mysq 中 information_schema 库
    python mysql创建表
    Mysql 连接池
    mysql 事务、游标
    python 操作数据库1--连接、执行sql语句
    搭建自动化脚本运行环境
    快速定位XPATH
    Fiddler--Filters
    Fiddler--Composer
    Fiddler--AutoResponder
  • 原文地址:https://www.cnblogs.com/qingsong/p/5058344.html
Copyright © 2011-2022 走看看