標准的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">
<!--
function imposeMaxLength(Object, MaxLen)
{
return (Object.value.length <MaxLen);
}
-->
</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"><!--
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)"
>
上面的方法在原來的基礎上加了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);
}
-----------------------------------------------------------------------------------------------
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>
