jQuery 類twitter的文本字?jǐn)?shù)限制帶提示效果插件
更新時間：2010年04月16日 18:20:08 作者：
基于jquery的仿twitter的文本字?jǐn)?shù)限制帶提示效果插件，這里提示比較好，不是簡單的限制，給用戶更好的體驗(yàn)。
之前也介紹過一個類似效果的JQuery插件jQuery maxlength文本字?jǐn)?shù)限制插件,不過這次的charcount部署更簡單,而且有超出數(shù)字提示的功能.
簡單的部署:
1.載入js:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/charCount.js"></script>
2.Html結(jié)構(gòu):
<form id="form" method="post" action="">
<h2>Default Usage</h2>
<div>
<label for="message">Type your message</label>
<textarea id="message1" name="message1"></textarea>
</div>
<h2>Custom Usage</h2>
<div>
<label for="message">Another message (limited to 30, warning at 10)</label>
<textarea id="message2" name="message2"></textarea>
</div>
</form>
3.charCount插件設(shè)置:
<script type="text/javascript">
$(document).ready(function(){
//default usage
$("#message1").charCount();
//custom usage
$("#message2").charCount({
allowed: 30,
warning: 10,
counterText: '剩余字?jǐn)?shù): '
});
});
</script>
演示代碼
打包打包下載
簡單的部署:
1.載入js:
復(fù)制代碼 代碼如下:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/charCount.js"></script>
2.Html結(jié)構(gòu):
復(fù)制代碼 代碼如下:
<form id="form" method="post" action="">
<h2>Default Usage</h2>
<div>
<label for="message">Type your message</label>
<textarea id="message1" name="message1"></textarea>
</div>
<h2>Custom Usage</h2>
<div>
<label for="message">Another message (limited to 30, warning at 10)</label>
<textarea id="message2" name="message2"></textarea>
</div>
</form>
3.charCount插件設(shè)置:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(document).ready(function(){
//default usage
$("#message1").charCount();
//custom usage
$("#message2").charCount({
allowed: 30,
warning: 10,
counterText: '剩余字?jǐn)?shù): '
});
});
</script>
演示代碼
打包打包下載
您可能感興趣的文章:
- 基于JQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊文本框顯示隱藏提示文本
- jQuery實(shí)現(xiàn)點(diǎn)擊文本框彈出熱門標(biāo)簽的提示效果
- jquery實(shí)現(xiàn)簡單文字提示效果
- 易操作的jQuery表單提示插件
- jquery實(shí)現(xiàn)加載進(jìn)度條提示效果
- jquery實(shí)現(xiàn)郵箱自動填充提示功能
- jquery 實(shí)現(xiàn)輸入郵箱時自動補(bǔ)全下拉提示功能
- jquery實(shí)現(xiàn)美觀的導(dǎo)航菜單鼠標(biāo)提示特效代碼
- jQuery簡單實(shí)現(xiàn)input文本框內(nèi)灰色提示文本效果的方法
相關(guān)文章
jquery 查找iframe父級頁面元素的實(shí)現(xiàn)代碼
jquery 查找iframe父級頁面元素的實(shí)現(xiàn)代碼，學(xué)習(xí)jquery的朋友可以參考下。2011-08-08
這篇文章主要介紹了jQuery中的類名選擇器（.class）用法,簡單介紹了jQuery類名選擇器的概念、原理并結(jié)合實(shí)例形式分析了類選擇器的簡單使用方法,需要的朋友可以參考下2018-05-05
在開發(fā)過程中經(jīng)常會碰到讓html組件不可輸入(只讀)，任何組件都有效的情況，接下來將為大家詳細(xì)實(shí)現(xiàn)下，感興趣的朋友可以參考下哈2013-04-04
為什么會出現(xiàn)在IE無效化呢，從上面的解決方案可以知道是XML文件的編碼問題，在轉(zhuǎn)化會前臺可讀時并未符合IE的XML 對象，故需要翻譯成IE兼容的對象。2009-10-10
jQuery 1.3 和 Validation 驗(yàn)證插件1.5.1
jQuery 1.3已經(jīng)新鮮出爐了，你可以通過jQuery 的官方博客查看相關(guān)細(xì)節(jié)。jQuery三歲了！2009-07-07
下面小編就為大家?guī)硪黄O(shè)置jquery UI 控件的大小方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
今天小朋友寫了個程式，出現(xiàn)亂碼，將解決過程分享一下 為方便說明，將環(huán)境簡化，vs.net 2003, jquery-1.3.2.js, web service調(diào)用2010-02-02
在前臺的表格中單擊單元格便可修改其中的內(nèi)容，回車鍵保存修改的內(nèi)容，esc撤銷保存的內(nèi)容2014-05-05
實(shí)現(xiàn)easyui的datagrid導(dǎo)出為excel的示例代碼
下面小編就為大家?guī)硪黄獙?shí)現(xiàn)easyui的datagrid導(dǎo)出為excel的示例代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
jQuery height()、innerHeight()、outerHeight()函數(shù)的區(qū)別詳解
這篇文章主要介紹了jQuery height()、innerHeight()、outerHeight()函數(shù)的區(qū)別詳解,需要的朋友可以參考下2016-05-05