輸入框提示文字跨瀏覽器的placeholder-jQuery版（jQuery插件EnPlaceholder）
欄目分類：效果代碼發布日期：2014-08-26 來源：互聯網瀏覽次數：次

輸入框提示文字跨瀏覽器的

.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>

用法：

首先在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});

相關熱詞：jQuery插件 jQuery placeholder 輸入框

輸入框提示文字跨瀏覽器的placeholder-jQuery版（jQuery插件EnPlaceholder）
欄目分類：效果代碼發布日期：2014-08-26 來源：互聯網瀏覽次數：次

相關內容

這些是最新的

熱門關鍵詞

熱門排行

關于聚合分享

版權聲明

輸入框提示文字跨瀏覽器的placeholder-jQuery版（jQuery插件EnPlaceholder） 欄目分類：效果代碼 發布日期：2014-08-26 來源：互聯網 瀏覽次數：次

相關內容

這些是最新的

熱門關鍵詞

熱門排行

關于聚合分享

版權聲明

輸入框提示文字跨瀏覽器的placeholder-jQuery版（jQuery插件EnPlaceholder）
欄目分類：效果代碼發布日期：2014-08-26 來源：互聯網瀏覽次數：次