文本框的字數限制功能jquery插件

更新時間：2009年11月24日 21:05:34 作者：

由于Html里只有input元素擁有maxlength屬性，而textarea沒有,所以以前對于文本框字數限制做了很多方案的解決，但是都不太完美。

后來在網上閑逛的時候突然發(fā)現一個比較好的文本框的字數限制的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:如果想實時動態(tài)顯示文本框里的字數，該屬性設置顯示字數的span或div的id.(字數顯示的顏色會隨著數量變化)
如果不修改它的源文件的話，加添了js引用后，你只需要給自己的text或者textarea加上data-maxsize屬性就可以了。
關于動態(tài)設置最大值
使用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> 

在界面加載時執(zhí)行.
演示代碼下載http://xiazai.jb51.net/200911/yuanma/textarea_maxlength.rar

您可能感興趣的文章: