jQuery插件EnPlaceholder實現(xiàn)輸入框提示文字
更新時間:2015年06月05日 11:24:39 投稿:hebedich
EnPlaceholder插件支持密碼框哦!實際對比同類的placeholder插件在ie等瀏覽器下效果要好很多!下面我們來具體探討下此插件的使用方法吧。
用法:
首先在head中分別引入jQuery及本插件
<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>文本框內(nèi)容改變時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>
相關文章
jQuery Mobile和HTML5開發(fā)App推廣注冊頁
jQuery Mobile和HTML5的組合可以直接開發(fā)web版的app,下面通過本教程給大家分享jQuery Mobile和HTML5開發(fā)App推廣注冊頁的實例代碼,感興趣的朋友參考下吧2016-11-11JQuery textlimit 顯示用戶輸入的字符數(shù) 限制用戶輸入的字符數(shù)
顯示用戶輸入的字符數(shù) 限制用戶輸入的字符數(shù)的實現(xiàn)方法。2009-05-05jQuery設置聚焦并使光標位置在文字最后的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query設置聚焦并使光標位置在文字最后的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08使用jQuery Ajax功能時需要注意的一個問題(內(nèi)存溢出)
最近發(fā)現(xiàn)jQuery越來越火,用它的人也越來越多。jQuery最強大的亮點莫過于它的CSS3 selector和極其簡單的Ajax請求調用2012-05-05