jQuery插件EnPlaceholder实现输入框提示文字

EnPlaceholder插件支持密码框哦!实际对比同类的placeholder插件在ie等浏览器下效果要好很多!下面我们来具体探讨下此插件的使用方法吧。

用法：

首先在head中分别引入jQuery及本插件

1. <script type="text/javascript" src="jquery-1.7.2.min.js">script>  
2. <script type="text/javascript" src="jquery.enplaceholder.js">script>  

然后就可以调用鸟

1. //通过value模拟placeholder  
2. $('input').placeholder();  
3. //通过插入元素模拟placeholder  
4. $('input').placeholder({isUseSpan:true});  

代码：

1. <script type="text/javascript" src="/demo/js/jquery.min.js"></script><script type="text/javascript" src="/demo/js/38/jquery.enplaceholder.js"></script> 
2. <style type="text/css"> 
3. body { font: 12px/1.5 'simsun'; } 
4. form { width: 420px; height: 260px; margin: 20px auto 0; } 
5. h3 { font-weight: bold; margin: 10px 0; } 
6. p { margin-bottom: 10px; } 
7. input { vertical-align: middle; margin-left: 10px; height: 24px; line-height: 24px; width: 200px; padding-left: 2px; } 
8. textarea { vertical-align: middle; margin-left: 10px; width: 200px; height: 50px; font: inherit; padding-left: 2px; } 
9. .wrap-statistics { visibility: hidden; } 
10. html{color:#000;background:#fff;} 
11. body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td,hr,button{margin:0;padding:0;} 
12. body,button,input,select,textarea{font:12px/1.5 tahoma,arial;} 
13. input,select,textarea{font-size:100%;} 
14. table{border-collapse:collapse;border-spacing:0;} 
15. th{text-align:inherit;} 
16. img{border:0;} 
17. iframe{display:block;} 
18. em,th{font-style:normal;font-weight:500;} 
19. ol,ul {list-style:none;} 
20. h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500;} 
21. a{text-decoration:none;} 
22. a:hover{text-decoration:underline;} 
23.  
24. .fn-clear{zoom:1;} 
25. .fn-clear:after{visibility:hidden;display:block;font-size:0;content:".";clear:both;height:0;} 
26. .fn-hide{display:none;} 
27. .fn-left,.fn-right{display:inline;} 
28. .fn-left{float:left;} 
29. .fn-right{float:right;} 
30. .fn-hide-text{font-size:0;line-height:0;color:rgba(0,0,0,0);} 
31. .sl-wrap,.sl-wrap td,.sl-wrap th{word-wrap:break-word;word-break:break-all;}  
32. .sl-wrap-table{ table-layout:fixed; }</style> 
33. <form id="form1"> 
34. <h3>通过value方式模拟placeholder</h3> 
35. <p>$('#form1 input,#form1 textarea').placeholder();</p> 
36. <p><label for="username1">用户名:</label> <input id="username1" name="username1" placeholder="请输入用户名" required="" type="text" value="" /></p> 
37. <p><label for="address1">地　址:</label> <input id="address1" name="address1" placeholder="请输入地址" required="" type="text" value="" /></p> 
38. <p><label for="remarks1">备　注:</label></p> 
39. </form> 
40. <form id="form2"> 
41. <h3>在不支持placeholder的浏览器下，通过插入悬浮的span元素方式模拟</h3> 
42. <h4>文本框内容改变时placeholder消失:</h4> 
43. <p>$('#username2,#password').placeholder({isUseSpan:true});</p> 
44. <p><label for="username2">用户名:</label> <input id="username2" name="username1" placeholder="请输入用户名" required="" type="text" value="" /></p> 
45. <p><label for="password">密　码:</label> <input id="password" name="password" placeholder="请输入密码" required="" type="password" value="" /></p> 
46. <p><label for="remarks2">备　注:</label></p> 
47. <h4>获得焦点时placeholder消失:</h4> 
48. <p>$('#address2').placeholder({isUseSpan:true,onInput:false});</p> 
49. <p><label for="address2">地　址:</label> <input id="address2" name="address1" placeholder="请输入地址" required="" type="text" value="" /></p> 
50. </form> 
51. <script> 
52. $('#form1 input,#form1 textarea').placeholder(); 
53. $('#username2,#password').placeholder({isUseSpan:true}); 
54. $('#address2').placeholder({isUseSpan:true,onInput:false}); 
55. $('#remarks2').placeholder({isUseSpan:true}); 
56. </script>