TextArea to set the MaxLength property maximum input value of the JS code _javascript tips

Source: Internet
Author: User

TextArea MaxLength properties in standard DHTML documents do not work by default, only when events occur
as follows: http://spiderscript.net/site/spiderscript/examples/ex_textarea_maxlength.asp
But the text has and functions <input type= "text" maxlength= "";
So how to implement the input content in the textarea can not more than how many characters.

Method 1, if you only need to intercept the contents of the number of characters, you can:

Copy Code code as follows:

<textarea onkeyup= "this.value = This.value.slice (0)" ></textarea>

Or
Copy Code code as follows:

<textarea onkeyup= "this.value = this.value.substring (0)" ></textarea>


Method 2
Copy Code code 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= "onkeyup=" return Ismaxlength (This) ></textarea>

This method uses the truncation method, enters the last character the time if again enters then will display the cursor flicker. However, you can solve the problem of length limitation by using CTRL + C, but if you use the mouse to copy it, it will not work.

Method 3, this method directly determines the length of the input
Copy Code code as follows:

<script language= "javascript" type= "Text/javascript" >
<!--
function Imposemaxlength (Object, MaxLen)
{
Return (Object.value.length <maxlen);
}
-->
</script>
<textarea name= "myname" onkeypress= "Return to Imposemaxlength (this);" ></textarea>

When the input is greater than 15 o'clock because the return is false so this implementation does not display the cursor flicker problem, but does not solve the duplicated length limit problem that the copied content can exceed the maximum length limit.
Return (Object.value.length <=maxlen); but I test found that when you enter a byte number =maxlen can also enter a character, so I change to the back (Object.value.length <maxlen );

Method 4In fact, Method 4 is Method 2 and Method 3 based on further optimization. Objectively speaking, Method 2 and Method 3 have done only part of the work
Copy Code code 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 original basis, which is mainly used to deal with the problem when the user completes the text transfer by copying and pasting instead of using input. The reality is the combination of Method 2 and Method 3. Here's what I've added for textarea and using the MaxLength attribute and the combination of the above example:
JavaScript code
---------------------------------------------------------------------------------------------
Copy Code code 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.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 code
Copy Code code as follows:

<asp:textbox id= "textboxaddress" runat= "Server" width= "200px"
Textmode= "MultiLine" height= "113px" maxlength= "ten" ></asp:TextBox>
<script language= "javascript" type= "Text/javascript" >
Settextareamaxlength (' <%=textboxaddress.clientid%> ', 10);
</script>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.