JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法

这篇文章主要介绍了JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法,涉及javascript针对页面元素样式及属性的相关操作技巧,需要的朋友可以参考下

本文实例讲述了JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法。分享给大家供大家参考。具体如下：

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> 

希望本文所述对大家的javascript程序设计有所帮助。