javascript中怎么實現設置文本框輸入時變顏色

本篇文章為大家展示了javascript中怎么實現設置文本框輸入時變顏色，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

在javascript中，可以使用onfocus事件設置文本框輸入時變顏色，只需要給元素綁定onfocus事件，再使用“對象.style.background="顏色值"”即可。onfocus事件在對象獲得焦點時發生，通常用于表單中。

動態設置文本框顏色：

主要是利用javascript中的觸發事件onfocus
<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="請輸入收件人地址"/>

用上述簡單方法可以做到文本框背景顏色的變換和提示信息的清除

onfocus 事件在對象獲得焦點時發生。Onfocus 通常用于 <input>, <select>, 和<a>.

提示： onfocus 事件的相反事件為 onblur 事件。

擴展資料：

onblur 事件會在對象失去焦點時發生。Onblur 經常用于Javascript驗證代碼，一般用于表單輸入框。

語法

HTML 中:

<element onblur="SomeJavaScriptCode">

JavaScript 中:

object.onblur=function(){SomeJavaScriptCode};

上述內容就是javascript中怎么實現設置文本框輸入時變顏色，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。