TextArea设置MaxLength属性最大输入值的js代码

标准的DHTML文档中TEXTAREA的MAXLENGTH属性默认情况下不起作用，只有当事件发生时才起作用如下：http://spiderscript.net/site/spiderscript/examples/ex_textarea_maxlength.asp 但TEXT中有且起作用<input type="text" maxlength="20">，那么在TEXTAREA中怎么实现输入内容不能超过多少个字符呢。方法1、如果只需要截取多少个字符的内容，则可以: 复制代码代码如下: <textarea onkeyup="this.value = this.value.slice(0, 80)"></textarea> 或复制代码代码如下: <textarea onkeyup="this.value = this.value.substring(0, 80)"></textarea> 方法2、复制代码代码如下: <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> 这个方法采用截断法，输入到最后一个字符的时候如果再输入则会显示光标闪烁。但可以解决使用CTRL+C复制过来的长度限制问题,但如果用鼠标复制过来的不还是不行。方法3、这个方法直接判断输入的长度复制代码代码如下: <script language="javascript" type="text/javascript">  </script> <textarea name="myName" onkeypress="return imposeMaxLength(this, 15);" ></textarea> 当输入内容大于15时因为返回为false所以这个实现不会显示光标闪烁的问题，但没有解决复制过来的长度限制问题即复制过来的内容可以超过最大长度限制 return (Object.value.length <=MaxLen);但我测试发现当输入字节数=maxlen时还可以输入一个字符，所以我改成 return (Object.value.length <MaxLen); 方法4、其实方法4是方法2与方法3的基础上进一步优化。客观的说方法2与方法3都只做了一部分工作复制代码代码如下: <mce:script language="javascript" type="text/javascript"></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)" > 上面的方法在原来的基础上加了onblur事件，这主要用于处理当用户不是采用输入而是通过复制粘贴方法来完成文本的转入时的问题。实际就是方法2与方法3的结合版。以下是我为TextArea增加并利用maxlength属性及结合上例的结果：<html><head><script type="text/javascript">function ismaxlength(obj){var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : ""if (obj.getAttribute && obj.value.length>mlength)alert('该文本框允许输入最大长度为'+mlength+"个字符,超出内容将会被截断")obj.value=obj.value.substring(0,mlength)}function imposeMaxLength(obj){ var mlength=obj.getAttribute? parseInt(obj.getAttribute("maxlength")) : "" return (obj.value.length <mlength);}</script></head><body><form name="myform"> <textarea maxlength="5" onkeypress="return imposeMaxLength(this)" onblur="ismaxlength(this)"></textarea></form></body></html> 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代码复制代码代码如下: <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>

　　推荐阅读

　　JS限制上传图片大小不使用控件在本地实现

文件上传之前的检测，通常是通过文件名来判断文件类型是否合法，但是要想检测文件的大小很难办到，除非在本地或者使用控件。使用JS可以轻松解决词问题，js在上传图片前判断大小这个可以用javascript实现,效果.../>>>详细阅读

本文标题：TextArea设置MaxLength属性最大输入值的js代码

地址：http://www.17bianji.com/kaifa2/JS/22763.html

1/2 1