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

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

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

 <script type="text/javascript" src="/demo/js/jquery.min.js"></script><script type="text/javascript" src="/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 id="form1"> <h3>通过value方式模拟placeholder</h3> <p>$('#form1 input,#form1 textarea').placeholder();</p> <p><label for="username1">用户名:</label> <input id="username1" name="username1" placeholder="请输入用户名" required="" type="text" value="" /></p> <p><label for="address1">地　址:</label> <input id="address1" name="address1" placeholder="请输入地址" required="" type="text" value="" /></p> <p><label for="remarks1">备　注:</label></p></form><form id="form2"> <h3>在不支持placeholder的浏览器下，通过插入悬浮的span元素方式模拟</h3> <h4>文本框内容改变时placeholder消失:</h4> <p>$('#username2,#password').placeholder({isUseSpan:true});</p> <p><label for="username2">用户名:</label> <input id="username2" name="username1" placeholder="请输入用户名" required="" type="text" value="" /></p> <p><label for="password">密　码:</label> <input id="password" name="password" 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 id="address2" name="address1" 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>