後來在網上閑逛的時候突然發現一個比較好的文字框的字數限制的jquery plugin，簡單好用
效果如下圖
![]()
複製代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>關於文字框的字數限制功能</title>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="maxlength.js"></script>
</head>
<body>
<p>Enter your hobbies (<50 characters)</p>
<textarea style="width:300px; height:150px" data-maxsize="50" data-output="status1" wrap="virtual"></textarea><br />
<div id="status1" style="width:300px;font-weight:bold;text-align:right"></div><br />
<p>Enter your postal code (<6 characters)</p>
<input type="text" name="T1" size="15" data-maxsize="6">
</body>
</html>
屬性解釋:
data-maxsize:該文本域能夠接受的最大字數.(important)
data-output:如果想即時動態顯示文字框裡的字數，該屬性設定顯示字數的span或div的id.(字數顯示的顏色會隨著數量變化)
如果不修改它的源檔案的話，加添了js引用後，你只需要給自己的text或者textarea加上data-maxsize屬性就可以了。
關於動態設定最大值
使用setformfieldsize方法：
setformfieldsize($field, maxsize, outputfieldid)
屬性解釋:
$field:就是被限制的文字框的JQuery對象(參考Jquery文檔).
maxsize:和data-maxsize一樣,該文本域能夠接受的最大字數.
outputfieldid:和data-output一樣.
例子:
複製代碼 代碼如下:
<script type="text/javascript">
//jQuery(document).ready(function($){ //fire on DOM ready
setformfieldsize(jQuery('#comment'), 50, 'charsremain')
//});
</script>
在介面載入時執行.
示範代碼下載http://xiazai.jb51.net/200911/yuanma/textarea_maxlength.rar
