jQuery maxlength文本字?jǐn)?shù)限制插件
更新時間：2010年04月16日 17:56:28 作者：
相信大家對twitter類的微博客都不陌生,作為一句話博客其字?jǐn)?shù)即時提示效果設(shè)計(jì)的非常人性化.
實(shí)現(xiàn)這個效果有很多方法,這里就介紹一種jQuery插件maxlength,它的使用非常簡單,讓我們先看看演示:
jquery maxlength演示地址
演示代碼打包下載
看看Demo中的重點(diǎn)代碼:
1.載入maxlength.js
<script type="text/javascript" src="maxlength.js"></script>
2.加入函數(shù),Demo中有3個例子,你可以根據(jù)實(shí)際需要選擇不同的函數(shù),不過最后一個例子對于中文而言是無效的.
復(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> 個字符</p>
<textarea class="limited"></textarea>
<input type="hidden" name="maxlength" value="20" />
</form>
<form action="">
<p>可以輸入 <span class="charsLeft">10</span> 個字符</p>
<input maxlength="10" class="limited" />
</form>
一些必要的解釋:
'useInput' : true 因?yàn)閠extarea需要借助input來實(shí)現(xiàn),所以當(dāng)你使用textarea的時候就需要這個參數(shù)
'feedback' : '.charsLeft' 是指即時顯示的字?jǐn)?shù)放入 class="charsLeft " 的容器中
input中設(shè)置最大數(shù)值直接用 maxlength="10"
textarea中的大數(shù)值需要設(shè)置與其對應(yīng)input的value數(shù)值 value="20"
您可能感興趣的文章:
- jQuery中size()方法用法實(shí)例
- jquery下div 的resize事件示例代碼
- jquery得到font-size屬性值實(shí)現(xiàn)代碼
- jquery 實(shí)現(xiàn)的改變顏色與背景的代碼 change(fontsize,background)補(bǔ)充2
- Jquery change(fontsize,background) 改變顏色與背景的代碼
- jQuery對象的length屬性用法實(shí)例
- 通過length屬性判斷jquery對象是否存在
- TextArea不支持maxlength的解決辦法(jquery)
- JQuery為textarea添加maxlength屬性的代碼
- jQuery length 和 size()區(qū)別總結(jié)
相關(guān)文章
詳解Jquery實(shí)現(xiàn)ready和bind事件
這篇文章主要為大家詳細(xì)介紹了Jquery實(shí)現(xiàn)ready和bind事件的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)圖片高亮顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
Django中使用jquery的ajax進(jìn)行數(shù)據(jù)交互的實(shí)例代碼
這篇文章主要介紹了Django中使用jquery的ajax進(jìn)行數(shù)據(jù)交互的相關(guān)知識，非常不錯，具有參考借鑒價值 ,需要的朋友可以參考下2017-10-10
jquery插件star-rating.js實(shí)現(xiàn)星級評分特效
Bootstrap Star Rating是一個簡單而強(qiáng)大的jQuery插件實(shí)現(xiàn)星級分?jǐn)?shù)評級。支持像分?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)前的上下文對象是一個html對象,可以調(diào)用html對象所擁有的屬性和方法,$(this),代表的上下文對象是一個jquery的上下文對象,可以調(diào)用jquery的方法和屬性值,需要的朋友可以參考下2014-12-12
jQuery 3.0在日前發(fā)布了最終的全新版本。這篇文章主要介紹了jQuery 3.0十大新特性最終版發(fā)布的相關(guān)資料,需要的朋友可以參考下2016-07-07
基于jQuery實(shí)現(xiàn)文本框只能輸入數(shù)字(小數(shù)、整數(shù))
在實(shí)際應(yīng)用中，文本框中有時候只能夠允許輸入整數(shù)，但是有時候可能更為"博愛"一點(diǎn)，可以允許輸入浮點(diǎn)數(shù)，下面就通過實(shí)例代碼介紹一下如何利用jquery實(shí)現(xiàn)此功能2016-01-01
jquery實(shí)現(xiàn)簡單的拖拽效果實(shí)例兼容所有主流瀏覽器
拖拽效果個人覺得是一種不錯的用戶體驗(yàn)，抽空研究了一下，原理還蠻簡單的，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈2013-06-06
jquery 獲取select數(shù)組與name數(shù)組長度的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨query 獲取select數(shù)組與name數(shù)組長度的實(shí)現(xiàn)代碼。小編覺得挺不錯的， 現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
jQuery實(shí)現(xiàn)ichat在線客服插件
這篇文章主要介紹了jQuery實(shí)現(xiàn)ichat在線客服插件,需要的朋友可以參考下2014-12-12