关于文本框的字数限制功能

由于Html里只有input元素拥有maxlength属性，而textarea没有,所以以前对于文本框字数限制做了很多方案的解决，但是都不太完美。后来在网上闲逛的时候突然发现一个比较好的文本框的字数限制的jquery plugin，简单好用,原文地址: http://www.javascriptkit.com/script/script2/enforceform.shtml

这是例子

 1  <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
 2  < html  xmlns ="http://www.w3.org/1999/xhtml"   >
 3  < head >
 4       < title > 关于文本框的字数限制功能 </ title >
 5  < script  type ="text/javascript"  src ="jquery-1.2.6.min.js" ></ script >
 6  < script  type ="text/javascript"  src ="maxlength.js" ></ script >
 7  </ head >
 8  < body >
 9  < p > Enter your hobbies ( < 50  characters)</p >
10     < textarea  style ="width:300px; height:150px"  data-maxsize ="50"  data-output ="status1"  wrap ="virtual" ></ textarea >< br  />
11     < div  id ="status1"  style ="width:300px;font-weight:bold;text-align:right" ></ div >< br  />
12  < p > Enter your postal code ( < 6  characters)</p >
13     < input  type ="text"  name ="T1"  size ="15"  data-maxsize ="6" >
14  </ body >
15  </ 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一样.

例子: 

1  < script type = " text/javascript " >
2  // jQuery(document).ready(function($){ //fire on DOM ready
3   setformfieldsize(jQuery( ' #comment ' ),  50 ,  ' charsremain ' )
4  // });

5 </script> 

在界面加载时执行.
Demo下载地址: Demo

转载于:https://www.cnblogs.com/zhongyueblog/archive/2009/11/19/1606316.html