最近做项目时,遇到要控制多行文本框输入内容的长度问题,假如长度限制在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!!!!!!