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

<script type="text/javascript" src="https://www.jb51.net/demo/js/jquery.min.js"></script><script type="text/javascript" src="https://www.jb51.net/demo/js/38/jquery.enplaceholder.js"></script> <style type="text/css"> body { font: 12px/1.5 'simsun'; } form { width: 420px; height: 260px; margin: 20px auto 0; } h3 { font-weight: bold; margin: 10px 0; } p { margin-bottom: 10px; } input { vertical-align: middle; margin-left: 10px; height: 24px; line-height: 24px; width: 200px; padding-left: 2px; } textarea { vertical-align: middle; margin-left: 10px; width: 200px; height: 50px; font: inherit; padding-left: 2px; } .wrap-statistics { visibility: hidden; } html{color:#000;background:#fff;} 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;} body,button,input,select,textarea{font:12px/1.5 tahoma,arial;} input,select,textarea{font-size:100%;} table{border-collapse:collapse;border-spacing:0;} th{text-align:inherit;} img{border:0;} iframe{display:block;} em,th{font-style:normal;font-weight:500;} ol,ul {list-style:none;} h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500;} a{text-decoration:none;} a:hover{text-decoration:underline;} .fn-clear{zoom:1;} .fn-clear:after{visibility:hidden;display:block;font-size:0;content:".";clear:both;height:0;} .fn-hide{display:none;} .fn-left,.fn-right{display:inline;} .fn-left{float:left;} .fn-right{float:right;} .fn-hide-text{font-size:0;line-height:0;color:rgba(0,0,0,0);} .sl-wrap,.sl-wrap td,.sl-wrap th{word-wrap:break-word;word-break:break-all;} .sl-wrap-table{ table-layout:fixed; }</style> <form> <h3>通过value方式模拟placeholder</h3> <p>$('#form1 input,#form1 textarea').placeholder();</p> <p><label for="username1">用户名:</label> <input placeholder="请输入用户名" required="" type="text" value="" /></p> <p><label for="address1">地　址:</label> <input placeholder="请输入地址" required="" type="text" value="" /></p> <p><label for="remarks1">备　注:</label></p> </form> <form> <h3>在不支持placeholder的浏览器下，通过插入悬浮的span元素方式模拟</h3> <h4>文本框内容改变时placeholder消失:</h4> <p>$('#username2,#password').placeholder({isUseSpan:true});</p> <p><label for="username2">用户名:</label> <input placeholder="请输入用户名" required="" type="text" value="" /></p> <p><label for="password">密　码:</label> <input placeholder="请输入密码" required="" type="password" value="" /></p> <p><label for="remarks2">备　注:</label></p> <h4>获得焦点时placeholder消失:</h4> <p>$('#address2').placeholder({isUseSpan:true,onInput:false});</p> <p><label for="address2">地　址:</label> <input placeholder="请输入地址" required="" type="text" value="" /></p> </form> <script> $('#form1 input,#form1 textarea').placeholder(); $('#username2,#password').placeholder({isUseSpan:true}); $('#address2').placeholder({isUseSpan:true,onInput:false}); $('#remarks2').placeholder({isUseSpan:true}); </script>