快捷導(dǎo)航

jQuery maxlength文本字?jǐn)?shù)限制插件

更新時(shí)間：2010年04月16日 17:56:28 作者：

相信大家對(duì)twitter類的微博客都不陌生,作為一句話博客其字?jǐn)?shù)即時(shí)提示效果設(shè)計(jì)的非常人性化.

實(shí)現(xiàn)這個(gè)效果有很多方法,這里就介紹一種jQuery插件maxlength,它的使用非常簡(jiǎn)單,讓我們先看看演示:
jquery maxlength演示地址
演示代碼打包下載
看看Demo中的重點(diǎn)代碼:
1.載入maxlength.js
<script type="text/javascript" src="maxlength.js"></script>
2.加入函數(shù),Demo中有3個(gè)例子,你可以根據(jù)實(shí)際需要選擇不同的函數(shù),不過最后一個(gè)例子對(duì)于中文而言是無效的.

復(fù)制代碼代碼如下:

 
$(function () { 
$('textarea.limited').maxlength({ 
'feedback' : '.charsLeft', 'useInput' : true 
}); 
$('input.limited').maxlength({ 
'feedback' : '.charsLeft' 
}); 
$('textarea.wordLimited').maxlength({ 
'words': true, 
'feedback': '.wordsLeft', 'useInput' : true 
}); 
}); 

3.調(diào)用

復(fù)制代碼代碼如下:

 
<form action=""> 
<p>可以輸入 <span class="charsLeft">20</span> 個(gè)字符</p> 
<textarea class="limited"></textarea> 
<input type="hidden" name="maxlength" value="20" /> 
</form> 
<form action=""> 
<p>可以輸入 <span class="charsLeft">10</span> 個(gè)字符</p> 
<input maxlength="10" class="limited" /> 
</form> 

一些必要的解釋:
'useInput' : true 因?yàn)閠extarea需要借助input來實(shí)現(xiàn),所以當(dāng)你使用textarea的時(shí)候就需要這個(gè)參數(shù)
'feedback' : '.charsLeft' 是指即時(shí)顯示的字?jǐn)?shù)放入 class="charsLeft " 的容器中
input中設(shè)置最大數(shù)值直接用 maxlength="10"
textarea中的大數(shù)值需要設(shè)置與其對(duì)應(yīng)input的value數(shù)值 value="20"

您可能感興趣的文章:

相關(guān)文章

詳解Jquery實(shí)現(xiàn)ready和bind事件
這篇文章主要為大家詳細(xì)介紹了Jquery實(shí)現(xiàn)ready和bind事件的相關(guān)資料，感興趣的小伙伴們可以參考一下
2016-04-04
jQuery實(shí)現(xiàn)圖片高亮顯示
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)圖片高亮顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
Django中使用jquery的ajax進(jìn)行數(shù)據(jù)交互的實(shí)例代碼
這篇文章主要介紹了Django中使用jquery的ajax進(jìn)行數(shù)據(jù)交互的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值 ,需要的朋友可以參考下
2017-10-10
jquery插件star-rating.js實(shí)現(xiàn)星級(jí)評(píng)分特效
Bootstrap Star Rating是一個(gè)簡(jiǎn)單而強(qiáng)大的jQuery插件實(shí)現(xiàn)星級(jí)分?jǐn)?shù)評(píng)級(jí)。支持像分?jǐn)?shù)星填充和RTL輸入先進(jìn)的功能。在利用純CSS-3造型使控制重點(diǎn)開發(fā)。該插件使用引導(dǎo)標(biāo)記和造型默認(rèn)情況下，但它可以覆蓋與其他任何CSS的標(biāo)記。
2015-04-04
實(shí)例講解JQuery中this和$(this)區(qū)別
這篇文章主要介紹了實(shí)例講解JQuery中this和$(this)的區(qū)別,this表示當(dāng)前的上下文對(duì)象是一個(gè)html對(duì)象,可以調(diào)用html對(duì)象所擁有的屬性和方法,$(this),代表的上下文對(duì)象是一個(gè)jquery的上下文對(duì)象,可以調(diào)用jquery的方法和屬性值,需要的朋友可以參考下
2014-12-12
jQuery 3.0十大新特性最終版發(fā)布
jQuery 3.0在日前發(fā)布了最終的全新版本。這篇文章主要介紹了jQuery 3.0十大新特性最終版發(fā)布的相關(guān)資料,需要的朋友可以參考下
2016-07-07
基于jQuery實(shí)現(xiàn)文本框只能輸入數(shù)字(小數(shù)、整數(shù))
在實(shí)際應(yīng)用中，文本框中有時(shí)候只能夠允許輸入整數(shù)，但是有時(shí)候可能更為"博愛"一點(diǎn)，可以允許輸入浮點(diǎn)數(shù)，下面就通過實(shí)例代碼介紹一下如何利用jquery實(shí)現(xiàn)此功能
2016-01-01
jquery實(shí)現(xiàn)簡(jiǎn)單的拖拽效果實(shí)例兼容所有主流瀏覽器
拖拽效果個(gè)人覺得是一種不錯(cuò)的用戶體驗(yàn)，抽空研究了一下，原理還蠻簡(jiǎn)單的，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈
2013-06-06
jquery 獲取select數(shù)組與name數(shù)組長(zhǎng)度的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨query 獲取select數(shù)組與name數(shù)組長(zhǎng)度的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-06-06
jQuery實(shí)現(xiàn)ichat在線客服插件
這篇文章主要介紹了jQuery實(shí)現(xiàn)ichat在線客服插件,需要的朋友可以參考下
2014-12-12