js動態設置輸入框字體/顏色

本文轉載自查看原文 2015-12-18 22:14 6568 javascript腳本語言/ html/css

動態設置文本框顏色：

主要是利用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-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>

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

自己修改的一個，功能：文本框默認字體淺色，獲取焦點時候清空文本框，輸入文字變黑色，失去焦點判斷文本框，重新回到淺色字體

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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 如何設置輸入框 input 中 placeholder的字體顏色、字號設置輸入框input中placeholder的字體顏色、字號如何設置輸入框 input 中 placeholder的字體顏色、字號 Css——設置input輸入框光標顏色 Android設置輸入框和軟鍵盤動態懸浮 js動態添加控件（輸入框為例） EasyUI/TopJUI之如何動態改變下拉列表框ComboBox輸入框的背景顏色 js輸入框練習 html5數字和顏色輸入框 js輸入框驗證