點擊文本框清除預設文本離開再恢復:很多網站的需要填寫的文本框在預設狀態下都會給出一個預設的提示語言,當滑鼠點擊此文本框的時候能夠將裡面的預設文本清除,當刪除輸入的文本且焦點離開文本框的時候再將預設的文本寫入文本框。代碼如下:點擊文本框清除預設值-螞蟻部落以上代碼實現了我們的要求,當點擊文本框的時候能...
點擊文本框清除預設文本離開再恢復:
很多網站的需要填寫的文本框在預設狀態下都會給出一個預設的提示語言,當滑鼠點擊此文本框的時候能夠將裡面的預設文本清除,當刪除輸入的文本且焦點離開文本框的時候再將預設的文本寫入文本框。
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <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>
以上代碼實現了我們的要求,當點擊文本框的時候能夠清除文本框中的內容,如果文本框沒有輸入任何內容,這個時候滑鼠焦點離開文本框的時候,會將文本框的值恢復到預設狀態。不過如果密碼框肯恩有點麻煩,因為密碼框並非顯示的明文,解決方案可以參閱如何實現在密碼框如出現提示語一章節。
相關閱讀:
1.onclick事件可以參閱javascript的onclick事件一章節。
2.onblur事件可以參閱javascript的onblur事件一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9421
更多內容可以參閱:http://www.softwhy.com/javascript/