jQuery插件EnPlaceholder實(shí)現(xiàn)輸入框提示文字
用法:
首先在head中分別引入jQuery及本插件
<script type="text/javascript" src="jquery-1.7.2.min.js">script> <script type="text/javascript" src="jquery.enplaceholder.js">script>
然后就可以調(diào)用鳥(niǎo)
//通過(guò)value模擬placeholder
$('input').placeholder();
//通過(guò)插入元素模擬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>通過(guò)value方式模擬placeholder</h3>
<p>$('#form1 input,#form1 textarea').placeholder();</p>
<p><label for="username1">用戶名:</label> <input id="username1" name="username1" placeholder="請(qǐng)輸入用戶名" required="" type="text" value="" /></p>
<p><label for="address1">地 址:</label> <input id="address1" name="address1" placeholder="請(qǐng)輸入地址" required="" type="text" value="" /></p>
<p><label for="remarks1">備 注:</label></p>
</form>
<form id="form2">
<h3>在不支持placeholder的瀏覽器下,通過(guò)插入懸浮的span元素方式模擬</h3>
<h4>文本框內(nèi)容改變時(shí)placeholder消失:</h4>
<p>$('#username2,#password').placeholder({isUseSpan:true});</p>
<p><label for="username2">用戶名:</label> <input id="username2" name="username1" placeholder="請(qǐng)輸入用戶名" required="" type="text" value="" /></p>
<p><label for="password">密 碼:</label> <input id="password" name="password" placeholder="請(qǐng)輸入密碼" required="" type="password" value="" /></p>
<p><label for="remarks2">備 注:</label></p>
<h4>獲得焦點(diǎn)時(shí)placeholder消失:</h4>
<p>$('#address2').placeholder({isUseSpan:true,onInput:false});</p>
<p><label for="address2">地 址:</label> <input id="address2" name="address1" placeholder="請(qǐng)輸入地址" 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>
相關(guān)文章
jQuery Easyui 下拉樹(shù)組件combotree
項(xiàng)目中做角色授權(quán)時(shí),需要做一個(gè)下拉框帶樹(shù)結(jié)構(gòu)的 并且可以多選的組件,就想到了easyui的combotree,下面通過(guò)實(shí)例代碼給大家介紹下Easyui 下拉樹(shù)組件combotree2016-12-12
jQuery Mobile和HTML5開(kāi)發(fā)App推廣注冊(cè)頁(yè)
jQuery Mobile和HTML5的組合可以直接開(kāi)發(fā)web版的app,下面通過(guò)本教程給大家分享jQuery Mobile和HTML5開(kāi)發(fā)App推廣注冊(cè)頁(yè)的實(shí)例代碼,感興趣的朋友參考下吧2016-11-11
Jquery實(shí)現(xiàn)彈出層分享微博插件具備動(dòng)畫(huà)效果
此Jquery插件是一款非常實(shí)用的特效,不但有分享功能,還具備了動(dòng)畫(huà)效果,提高了用戶體驗(yàn),感興趣的朋友可以參考下哈2013-04-04
JQuery textlimit 顯示用戶輸入的字符數(shù) 限制用戶輸入的字符數(shù)
顯示用戶輸入的字符數(shù) 限制用戶輸入的字符數(shù)的實(shí)現(xiàn)方法。2009-05-05
jQuery設(shè)置聚焦并使光標(biāo)位置在文字最后的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jQuery設(shè)置聚焦并使光標(biāo)位置在文字最后的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
jquery中在頁(yè)面加載完成后執(zhí)行某個(gè)方法
這篇文章主要介紹了jquery中在頁(yè)面加載完成后執(zhí)行某個(gè)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10
使用jQuery Ajax功能時(shí)需要注意的一個(gè)問(wèn)題(內(nèi)存溢出)
最近發(fā)現(xiàn)jQuery越來(lái)越火,用它的人也越來(lái)越多。jQuery最強(qiáng)大的亮點(diǎn)莫過(guò)于它的CSS3 selector和極其簡(jiǎn)單的Ajax請(qǐng)求調(diào)用2012-05-05
jQuery截取指定長(zhǎng)度字符串的實(shí)現(xiàn)原理及代碼
截取指定長(zhǎng)度字符串操作在新聞列表這種類型的操作中大量應(yīng)用,下面有個(gè)示例,大家可以參考下2014-07-07

