最近做项目时,遇到要控制多行文本框输入内容的长度问题,假如长度限制在1000以内,如果是单行的话,设置下maxlength属性就OK了,但对于多行文本框来说就不起作用了。怎么办呢,只能利用脚本来控制了。在网上搜了点资料,查到了相关的JS函数,比较凌乱,用起来也不太方便,主要是触发了以下几个事件!

1、onkeypress,2、onkeydown,3、onbeforepaste,4、onpaste 均用来验证输入或者粘贴内容的长度是不是已经超过限制,如果 是的话,就取消当前的操作。

但是这此方法都要在文本框的HTML语言中一一写入相应的触发事件,代码多且用起来也不方便。所以就想起来把这些函数封装成一个JS类,不就好了么。

下面就是普通的JS类的完整代码:


//以下是封装好的JS类。正确的验证多行文本框的长度问题

在这里涉及到JS类和函数体对this的使用问题,也就是在javascript中的this指针的用法。


//javascript普通类的写法 //////////////////////////////               
function areaJS()
{
      //javascript中的this的用法
    this.maxLength;
    this.element; 
    var parentThis=this; //指向的是areaJS     
    this.Init=function (varMaxLenth,varID){           
        parentThis.maxLength=varMaxLenth;
        parentThis.element =document.all[varID]; 
        parentThis.element.attachEvent("onkeypress",parentThis.doKeypress);
        parentThis.element.attachEvent("onkeydown",parentThis.doKeydown);           parentThis.element.attachEvent"onbeforepaste",parentThis.doBeforePaste);
        parentThis.element.attachEvent("onpaste",parentThis.doPaste);
    };

    this.doKeypress=function ()
    {
        if(!isNaN(parentThis.maxLength))
        {
              parentThis.maxLength = parseInt(parentThis.maxLength);
              var oTR = parentThis.element.document.selection.createRange();
              if(oTR.text.length >= 1)
                      event.returnValue = true;
              else if(parentThis.element.value.length > parentThis.maxLength-1)
                      event.returnValue = false;
        }
    };

    this.doKeydown=function ()
    {
        setTimeout(function()
        {
              parentThis.maxLength = parseInt(parentThis.maxLength);
              if(!isNaN(parentThis.maxLength))
              {
                  if(parentThis.element.value.length > parentThis.maxLength-1)
                  {//超过了指定的范围,则重新定位开始的位置,并清空。
                  //比如 oTR="123456";而我们只能输入4位,则oTR.moveStart("character",-1*(6-4))--->oTR.moveStart("character",-2) 移去2位,就剩下“1234”
                      var oTR = window.document.selection.createRange();
                      oTR.moveStart("character", -1*(parentThis.element.value.length-parentThis.maxLength))
                      oTR.text = "";
                  }
              }
        },1)
    };

    this.doBeforePaste=function ()
    {
        if(!isNaN(parentThis.maxLength))//如果为真的话,就执行源对象上的操作,否则取消源对象上的操作
                  event.returnValue = false;
    };

    this.doPaste=function ()
    {
        if(!isNaN(parentThis.maxLength))
        {
              event.returnValue = false;
              parentThis.maxLength = parseInt(parentThis.maxLength);
              var oTR = parentThis.element.document.selection.createRange();
              var iInsertLength = parentThis.maxLength - parentThis.element.value.length + oTR.text.length;
              //截断字符
              var sData = window.clipboardData.getData("Text").substr(0, iInsertLength);
              oTR.text = sData;
        }
    };
}
下面测试下JS类,是不是能有效的控制文本框内容的长度问题

<textarea rows="4" cols="30" id="aa" NAME="aa"></textarea>
<script language=javascript>
var aa=new areaJS();
aa.Init(5,"aa");
alert('普通JS类调用,文本框被限制的长度为:'+aa.maxLength);


经过测试成功!!!!!但这样还是需要声明一个类的对象,能不能再省点事呢??于是我又想起能不能做个JS的静态类呢。经过查相关的资料,终于写出来了。呵呵


///////////javascript静态类的写法//////////////////////////////
//静态类的名称--ChkMaxLen
function ChkMaxLen() {           } 
//静态类的变量列表--ChkMaxLen
    ChkMaxLen.maxLength=0;
    ChkMaxLen.element=null;   
//静态类的函数列表--ChkMaxLen
ChkMaxLen.Init=function (varMaxLenth,varID){ 

    ChkMaxLen.maxLength=varMaxLenth;
    ChkMaxLen.element =document.all[varID]; 
    ChkMaxLen.element.attachEvent("onkeypress",ChkMaxLen.doKeypress);
    ChkMaxLen.element.attachEvent("onkeydown",ChkMaxLen.doKeydown);
    ChkMaxLen.element.attachEvent("onbeforepaste",ChkMaxLen.doBeforePaste);
    ChkMaxLen.element.attachEvent("onpaste",ChkMaxLen.doPaste);
};

ChkMaxLen.doKeypress=function ()
{
    if(!isNaN(ChkMaxLen.maxLength))
    {
        ChkMaxLen.maxLength = parseInt(ChkMaxLen.maxLength);
        var oTR = ChkMaxLen.element.document.selection.createRange();
        if(oTR.text.length >= 1)
                  event.returnValue = true;
        else if(ChkMaxLen.element.value.length > ChkMaxLen.maxLength-1)
                  event.returnValue = false;
    }
};

ChkMaxLen.doKeydown=function ()
{
    setTimeout(function()
    {
        ChkMaxLen.maxLength = parseInt(ChkMaxLen.maxLength);
        if(!isNaN(ChkMaxLen.maxLength))
        {
              if(ChkMaxLen.element.value.length > ChkMaxLen.maxLength-1)
              {//超过了指定的范围,则重新定位开始的位置,并清空。
              //比如 oTR="123456";而我们只能输入4位,则oTR.moveStart("character",-1*(6-4))--->oTR.moveStart("character",-2) 移去2位,就剩下“1234”
                  var oTR = window.document.selection.createRange();
                  oTR.moveStart("character", -1*(ChkMaxLen.element.value.length-ChkMaxLen.maxLength))
                  oTR.text = "";
              }
        }
    },1)
};

ChkMaxLen.doBeforePaste=function ()
{
    if(!isNaN(ChkMaxLen.maxLength))//如果为真的话,就执行源对象上的操作,否则取消源对象上的操作
              event.returnValue = false;
};

ChkMaxLen.doPaste=function ()
{
    if(!isNaN(ChkMaxLen.maxLength))
    {
        event.returnValue = false;
        ChkMaxLen.maxLength = parseInt(ChkMaxLen.maxLength);
        var oTR = ChkMaxLen.element.document.selection.createRange();
        var iInsertLength = ChkMaxLen.maxLength - ChkMaxLen.element.value.length + oTR.text.length;
        //截断字符
        var sData = window.clipboardData.getData("Text").substr(0, iInsertLength);
        oTR.text = sData;
    }
};


测试以上两个类

<textarea rows="4" cols="30" id="aa" NAME="aa"></textarea>
<script language=javascript>
var aa=new areaJS();
aa.Init(5,"aa");

alert('普通JS类调用,文本框被限制的长度为:'+aa.maxLength);


ChkMaxLen.Init(5,"aa");

alert('静态JS类调用,文本框被限制的长度为:'+ChkMaxLen.maxLength);</script>


哈哈,OK!!!!!!