本文實例介紹了點擊文本框清除默認文本離開再恢復的js實例代碼，分享給大家供大家參考，具體內容如下
相關知識:
1、onclick事件的定義和用法:
當點擊對象的時候會觸發此事件。
瀏覽器支持:
1）、IE瀏覽器支持此事件。
2）、火狐瀏覽器支持此事件。
3）、Opera瀏覽器支持此事件。
4）、谷歌瀏覽器支持此事件。
5）、safria瀏覽器支持此事件。
實例代碼:
<html><head><meta charset="gb2312"/><title>武林網</title><style type="text/css">div{ width:100px; height:100px; background-color:red;}</style><script type="text/javascript">window.onload=function(){ var mydiv=document.getElementById("mydiv"); mydiv.onclick=function(){ mydiv.style.backgroundColor="green"; }}</script></head><body> <div id="mydiv"></div></body></html>以上代碼為div注冊onclick事件處理函數，當點擊div的時候就會執行此處理函數將div的背景顏色設置為綠色。
2、onblur事件的定義和用法:
當指定對象失去焦點時就會觸發此事件。
實例代碼:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>武林網</title><style type="text/css">.mytest{ background-color:green;}</style><script type="text/javascript">window.onload=function(){ var username=document.getElementById("username"); username.focus(); username.onblur=function(){ username.style.backgroundColor="green"; }}</script></head><body><input type="text" name="username" id="username" /></body></html>以上代碼為input元素的onblur事件綁定事件處理函數，當input元素失去焦點的時候，能夠將背景顏色設置為綠色。
接下來是重中之重：點擊文本框清除默認文本離開再恢復
很多網站的需要填寫的文本框在默認狀態下都會給出一個默認的提示語言，當鼠標點擊此文本框的時候能夠將里面的默認文本清除，當刪除輸入的文本且焦點離開文本框的時候再將默認的文本寫入文本框。
代碼如下:
<html><head><meta charset="gb2312"><title>點擊文本框清除默認值</title><script type="text/javascript"> window.onload=function(){ var username=document.getElementById("username"); username.onclick=function() { if(username.value=="請輸入您的姓名") { username.value=""; this.focus(); } } username.onblur=function() { if(username.value=="") { username.value="請輸入您的姓名"; } }}</script></head><body><input type="text" value="請輸入您的姓名" id="username" /></body></html>以上代碼實現了我們的要求，當點擊文本框的時候能夠清除文本框中的內容，如果文本框沒有輸入任何內容，這個時候鼠標焦點離開文本框的時候，會將文本框的值恢復到默認狀態。不過如果密碼框肯恩有點麻煩，因為密碼框并非顯示的明文，解決方案可以參考如何實現在密碼框如出現提示語下段內容。
如何實現在密碼框如出現提示語:
有時候我們需要在登陸表單有一些提示語言，比如“請輸入用戶民”和“請輸入密碼”等語言，至于用戶名好說，但是在密碼框中出現“請輸入密碼”這樣的語言就有點麻煩了，因為在密碼框輸入的內容不會以明碼顯示。如果動態的控制type屬性的話就有兼容性問題，如果input已經存在于頁面中的話，在IE8和IE8以下瀏覽器中，type屬性是只讀的。所以就得想其他辦法，代碼如下:
<html> <head> <meta charset="gb2312"> <title武林網</title><style type="text/css">#tx{ width:100px;}#pwd{ display:none; width:100px;}</style><script type="text/javascript"> window.onload=function(){ var tx=document.getElementById("tx"); var pwd=document.getElementById("pwd"); tx.onfocus=function(){ if(this.value!="密碼") return; this.style.display="none"; pwd.style.display="block"; pwd.value=""; pwd.focus(); } pwd.onblur=function(){ if(this.value!=""){ return; } this.style.display="none"; tx.style.display=""; tx.value="密碼"; } }</script> </head> <body> <input type="text" value="密碼" id="tx"/> <input type="password" id="pwd" /> </body> </html> 以上代碼實現了我們的要求，可以出現明碼的提示，當輸入密碼的時候就是以密碼方式輸入。
實現的原理非常的簡單，在默認狀態以type="text"文本框顯示，當點擊文本框的時候，以type="password"密碼框顯示，原來顯示的文本框隱藏，也就是說做了一個替換而已。
以上就是本文的全部內容，希望對大家的學習javascript程序設計有所幫助。
新聞熱點
疑難解答
