js显示文本框提示文字的方法

这篇文章主要介绍了js显示文本框提示文字的方法,涉及javascript鼠标事件及样式操作的相关技巧,非常简单实用,需要的朋友可以参考下

本文实例讲述了js显示文本框提示文字的方法。分享给大家供大家参考。具体实现方法如下：

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
3. <html xmlns="http://www.w3.org/1999/xhtml"> 
4. <head> 
5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
6. <title>js提示文字</title> 
7. <style type="text/css"> 
8. input{ 
9. width:200px; height:24px; 
10. line-height:24px; border:1px solid #999; 
11. background:#ccc; margin:15px 0 0 100px; 
12. padding:4px; color:#666; 
13. } 
14. .current{ 
15. background:#E0FEE4; 
16. border:1px solid #093; 
17. } 
18. </style> 
19. </head> 
20. <body> 
21. <input name="" type="text" value="请输入姓名："/><br /> 
22. <input name="" type="text" value="请输入昵称："/><br /> 
23. <input name="" type="text" value="输入验证码："/><br /> 
24. <input name="" type="text" value="请输入手机号码："/><br /> 
25. <input name="" type="text" value="请输入电子邮件："/> 
26. <script type="text/javascript"> 
27. var aInp=document.getElementsByTagName('input'); 
28. var i=0; 
29. var sArray=[]; 
30. for(i=0; i<aInp.length; i++) 
31. { 
32. aInp[i].index=i; 
33. sArray.push(aInp[i].value); 
34. aInp[i].onfocus=function() 
35. { 
36. if(sArray[this.index]==aInp[this.index].value) 
37. { 
38. aInp[this.index].value=''; 
39. } 
40. aInp[this.index].className='current'; 
41. }; 
42. aInp[i].onblur=function() 
43. { 
44. if(aInp[this.index].value=='') 
45. { 
46. aInp[this.index].value=sArray[this.index]; 
47. } 
48. aInp[this.index].className=''; 
49. }; 
50. } 
51. </script> 
52. </body> 
53. </html> 

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