這篇文章主要介紹了JavaScript實(shí)現(xiàn)文本框中默認(rèn)顯示背景圖片在獲得焦點(diǎn)后消失的方法,涉及javascript針對(duì)頁(yè)面元素樣式及屬性的相關(guān)操作技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript實(shí)現(xiàn)文本框中默認(rèn)顯示背景圖片在獲得焦點(diǎn)后消失的方法。分享給大家供大家參考。具體如下：

html代碼：

1. <form name="searchform" id="search-form"> 
2. <div> 
3. <b>Search</b> 
4. <input type="text" name="txtInput" 
5. title="Enter the terms you wish to search for." /> 
6. <input type="submit" value="GO!" class="submit" 
7. style="cursor: pointer;" /> 
8. </div> 
9. </form> 

JS代碼：

1. <script type="text/javascript" language="javascript"> 
2. (function() { 
3. var id = document.getElementById('search-form'); 
4. if (id && id.txtInput) { 
5. var name = id.txtInput; 
6. var unclicked = function() { 
7. if (name.value == '') { 
8. name.style.background = '#FFFFFF url(images/googbg.png) left no-repeat'; 
9. } 
10. }; 
11. var clicked = function() { 
12. name.style.background = '#ffffff'; 
13. }; 
14. name.onfocus = clicked; 
15. name.onblur = unclicked; 
16. unclicked(); 
17. } 
18. })(); 
19. </script> 

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。