html 最大输入长度,TextArea设置MaxLength属性最大输入值的js代码

标准的DHTML文档中TEXTAREA的MAXLENGTH属性默认情况下不起作用，只有当事件发生时才起作用

如下：http://spiderscript.net/site/spiderscript/examples/ex_textarea_maxlength.asp

但TEXT中有且起作用，

那么在TEXTAREA中怎么实现输入内容不能超过多少个字符呢。

方法1、如果只需要截取多少个字符的内容，则可以:

或

方法2、

function ismaxlength(obj){

var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : ""

if (obj.getAttribute && obj.value.length>mlength)

obj.value=obj.value.substring(0,mlength)

}

这个方法采用截断法，输入到最后一个字符的时候如果再输入则会显示光标闪烁。但可以解决使用CTRL+C复制过来的长度限制问题,但如果用鼠标复制过来的不还是不行。

方法3、这个方法直接判断输入的长度

当输入内容大于15时因为返回为false所以这个实现不会显示光标闪烁的问题，但没有解决复制过来的长度限制问题即复制过来的内容可以超过最大长度限制

return (Object.value.length <=MaxLen);但我测试发现当输入字节数=maxlen时还可以输入一个字符，所以我改成 return (Object.value.length

方法4、其实方法4是方法2与方法3的基础上进一步优化。客观的说方法2与方法3都只做了一部分工作

cols="45"

rows="3"

wrap="virtual"

οnkeypress="return(this.value.length<20)"

οnkeydοwn="textlen(this,20)"

οnkeyup="textlen(this,20)"

οnblur="maxtext(this,20)"

>

上面的方法在原来的基础上加了onblur事件，这主要用于处理当用户不是采用输入而是通过复制粘贴方法来完成文本的转入时的问题。实际就是方法2与方法3的结合版。 以下是我为TextArea增加并利用maxlength属性及结合上例的结果：

Javascript代码

---------------------------------------------------------------------------------------------

function SetTextAreaMaxLength(controlId,length)

{

// JScript File for TextArea

// Keep user from entering more than maxLength characters

function doKeypress(control,length){

maxLength = length;

value = control.value;

if(maxLength && value.length > maxLength-1){

event.returnValue = false;

maxLength = parseInt(maxLength);

}

}

// Cancel default behavior

function doBeforePaste(control,length){

maxLength = length;

if(maxLength)

{

event.returnValue = false;

}

}

// Cancel default behavior and create a new paste routine

function doPaste(control,length){

maxLength = length;

value = control.value;

if(maxLength){

event.returnValue = false;

maxLength = parseInt(maxLength);

var oTR = control.document.selection.createRange();

var iInsertLength = maxLength - value.length + oTR.text.length;

var sData = window.clipboardData.getData("Text").substr(0,iInsertLength);

oTR.text = sData;

}

}

function doDragenter(control,length)

{

maxLength = length;

value = control.value;

if(maxLength){

event.returnValue = false;

}

}

function addEvent(elm, evType, fn, useCapture)

{

if (elm.addEventListener)

{

elm.addEventListener(evType, fn, useCapture);

return true;

}

else if (elm.attachEvent)

{

var r = elm.attachEvent('on' + evType, fn);

return r;

}

else {

elm['on' + evType] = fn;

}

}

function AttacheventTextAreaBeforePaste(obj,length)

{

return function()

{

doBeforePaste(obj,length)

}

}

function AttacheventTextAreaPaste(obj,length)

{

return function()

{

doPaste(obj,length)

}

}

function AttacheventTextAreaKeyPress(obj,length)

{

return function()

{

doKeypress(obj,length)

}

}

function AttacheventTextAreaDragEnter(obj,length)

{

return function()

{

doDragenter(obj,length);

}

}

var obj = document.getElementById(controlId);

addEvent(obj,'keypress',AttacheventTextAreaKeyPress(obj,length),null);

addEvent(obj,'beforepaste',AttacheventTextAreaBeforePaste(obj,length),null);

addEvent(obj,'paste',AttacheventTextAreaPaste(obj,length),null);

addEvent(obj,'dragenter',AttacheventTextAreaDragEnter(obj,length),null);

}

function SetTextAreaMaxLength(controlId,length)

{

// JScript File for TextArea

// Keep user from entering more than maxLength characters

function doKeypress(control,length){

maxLength = length;

value = control.value;

if(maxLength && value.length > maxLength-1){

event.returnValue = false;

maxLength = parseInt(maxLength);

}

}

// Cancel default behavior

function doBeforePaste(control,length){

maxLength = length;

if(maxLength)

{

event.returnValue = false;

}

}

// Cancel default behavior and create a new paste routine

function doPaste(control,length){

maxLength = length;

value = control.value;

if(maxLength){

event.returnValue = false;

maxLength = parseInt(maxLength);

var oTR = control.document.selection.createRange();

var iInsertLength = maxLength - value.length + oTR.text.length;

var sData = window.clipboardData.getData("Text").substr(0,iInsertLength);

oTR.text = sData;

}

}

function doDragenter(control,length)

{

maxLength = length;

value = control.value;

if(maxLength){

event.returnValue = false;

}

}

function addEvent(elm, evType, fn, useCapture)

{

if (elm.addEventListener)

{

elm.addEventListener(evType, fn, useCapture);

return true;

}

else if (elm.attachEvent)

{

var r = elm.attachEvent('on' + evType, fn);

return r;

}

else {

elm['on' + evType] = fn;

}

}

function AttacheventTextAreaBeforePaste(obj,length)

{

return function()

{

doBeforePaste(obj,length)

}

}

function AttacheventTextAreaPaste(obj,length)

{

return function()

{

doPaste(obj,length)

}

}

function AttacheventTextAreaKeyPress(obj,length)

{

return function()

{

doKeypress(obj,length)

}

}

function AttacheventTextAreaDragEnter(obj,length)

{

return function()

{

doDragenter(obj,length);

}

}

var obj = document.getElementById(controlId);

addEvent(obj,'keypress',AttacheventTextAreaKeyPress(obj,length),null);

addEvent(obj,'beforepaste',AttacheventTextAreaBeforePaste(obj,length),null);

addEvent(obj,'paste',AttacheventTextAreaPaste(obj,length),null);

addEvent(obj,'dragenter',AttacheventTextAreaDragEnter(obj,length),null);

}

-----------------------------------------------------------------------------------------------

HTML代码

TextMode="MultiLine" Height="113px" MaxLength="10">

SetTextAreaMaxLength('',10);