Js Code for setting the maximum input value of the MaxLength attribute in TextArea

The MAXLENGTH attribute of TEXTAREA in the standard DHTML document does not work by default and only works when an event occurs.
Http://spiderscript.net/site/spiderscript/examples/ex_textarea_maxlength.asp:
However, TEXT works. <input type = "text" maxlength = "20">,
In TEXTAREA, how can we set the input content to no more than many characters.

Method 1, If you only need to intercept the number of characters, you can:
Copy codeThe Code is as follows:
<Textarea onkeyup = "this. value = this. value. slice (0, 80)"> </textarea>

Or
Copy codeThe Code is as follows:
<Textarea onkeyup = "this. value = this. value. substring (0, 80)"> </textarea>


Method 2,
Copy codeThe Code is as follows:
<Script type = "text/javascript">
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)
}
</Script>
<Textarea maxlength = "40" onkeyup = "return ismaxlength (this)"> </textarea>

This method uses the truncation method. If you input the last character, the cursor will flash. However, the restriction on the length of a copy by using CTRL + C can be solved. However, if you copy a copy by using the mouse, it will not work.

Method 3This method directly determines the input length
Copy codeThe Code is as follows:
<Script language = "javascript" type = "text/javascript">
<! --
Function imposeMaxLength (Object, MaxLen)
{
Return (Object. value. length <MaxLen );
}
-->
</Script>
<Textarea name = "myName" onkeypress = "return imposeMaxLength (this, 15);"> </textarea>

When the input content is greater than 15, the system returns false, so this implementation will not display the problem of blinking the cursor, but it does not solve the copy length restriction problem. That is, the copied content can exceed the maximum length limit.
Return (Object. value. length <= MaxLen); however, I tested that a single character can be entered when the number of input bytes is maxlen, so I changed it to return (Object. value. length <MaxLen );

Method 4In fact, Method 4 is further optimized based on method 2 and method 3. Objectively speaking, method 2 and method 3 only do part of the work.
Copy codeThe Code is as follows:
<Mce: script language = "javascript" type = "text/javascript"> <! --
Function textlen (x, y ){
Var thelength = x. value. length;
Window. status = thelength + 'of' + y + 'maximum characters .';
}
Function maxtext (x, y ){
Tempstr = x. value
If (tempstr. length> y ){
X. value = tempstr. substring (0, y );
}
Textlen (x, y );
}
// --> </Mce: script>
<Form name = "myform">
<Textarea name = "mytextarea"
Cols = "45"
Rows = "3"
Wrap = "virtual"
Onkeypress = "return (this. value. length <20 )"
Onkeydown = "textlen (this, 20 )"
Onkeyup = "textlen (this, 20 )"
Onblur = "maxtext (this, 20 )"
>

The above method adds the onblur event on the basis of the original, which is mainly used to handle the problem when the user does not use the input but completes the text transfer through the copy and paste method. The actual version is the combination of method 2 and method 3. The following is the result of adding and using the maxlength attribute for TextArea and combining the preceding example:
Javascript code
Bytes ---------------------------------------------------------------------------------------------
Copy codeThe Code is as follows:
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.doc ument. 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.doc ument. 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 );
}

Bytes -----------------------------------------------------------------------------------------------
HTML code
Copy codeThe Code is as follows:
<Asp: TextBox ID = "TextBoxAddress" runat = "server" Width = "200px"
TextMode = "MultiLine" Height = "113px" MaxLength = "10"> </asp: TextBox>
<Script language = "javascript" type = "text/javascript">
SetTextAreaMaxLength ('<% = TextBoxAddress. ClientID %>', 10 );
</Script>