jQuery插件InputLimitor實作文本框輸入限制字數統計

點我檢視InputLimitor線上示範

使用說明

需要使用jQuery庫檔案和InputLimitor庫檔案

<a href="http://jquery.com/">http://jquery.com/</a>

<a href="http://plugins.jquery.com/project/inputlimitor">http://plugins.jquery.com/project/inputlimitor</a>

同時可自定義顯示提示框的CSS樣式

使用執行個體

一，包含檔案部分

&lt;script type="text/javascript" src="jquery-1.3.2.min.js"&gt;&lt;/script&gt; 

&lt;script type="text/javascript" src="jquery.inputlimitor.1.0.js"&gt;&lt;/script&gt; 

&lt;link rel="stylesheet" type="text/css" href="jquery.inputlimitor.1.0.css" /&gt; 

二，HTML部分

&lt;textarea rows="3" cols="30" name="textarea" class="limited"&gt;&lt;/textarea&gt; 

三，javascript部分

$('.limited').inputlimitor(); 

如上執行個體是最簡單的一種使用形式，如果要提示目前字元輸入數和總數，可使用如下方法：

$('input[name=text1]').inputlimitor({ 

limit: 50, 

remText: '%n caractere%s restantes', 

limitText: 'Campo limitado a %n caractere%s.' 

}); 

limit表示字元輸入的限制數，remText表示輸入字元提示文本，其中%n表示目前剩餘字元數，%s表示輸入的限制數。

另外類似textlimit插件提示效果使用執行個體

1，HTML部分

&lt;input type="text" name="text3" id="text3" size="30" /&gt; 

&lt;span id="limitingtext" style="color: #999;"&gt;Field limited to 30 characters.&lt;/span&gt; 

2，Javascript部分

$('input[name=text3]').inputlimitor({ 

limit: 30, 

boxId: 'limitingtext', 

boxAttach: false 

boxId表示提示資訊顯示的ID

InputLimitor插件與textlimit插件使用基本上差不多，都非常簡單，InputLimitor插件功能更為強大，值得推薦！

點我下載下傳InputLimitor

<a href="http://jquerycodes.googlecode.com/files/jquery-inputlimitor.1.0.zip">http://jquerycodes.googlecode.com/files/jquery-inputlimitor.1.0.zip</a>

本文轉自linzheng 51CTO部落格，原文連結:http://blog.51cto.com/linzheng/1081604