TEXTAREA最大长度检查

分享于 

6分钟阅读

Web开发

  繁體 雙語

介绍

文章描述了如何限制文本中允许的字符数。

背景

文本框具有maxlength属性来限制允许字符的数目。 但是TextArea没有任何属性来控制。 我们将使用简单的javascript来控制它。

使用代码

我们将编写两个函数处理程序来处理按键和粘贴


//


// Any source code blocks look like this



 function maxLength(field,maxChars)


 {


 if(field.value.length >= maxChars) {


 event.returnValue=false;


 return false;


 }


 } 



 function maxLengthPaste(field,maxChars)


 {


 event.returnValue=false;


 if((field.value.length + window.clipboardData.getData("Text").length) > maxChars) {


 return false;


 }


 event.returnValue=true;


 }



//



maxLength() 将用于keypress事件,maxLengthPaste将用于onPaste事件。

将这里代码添加到你的html或者生成这里代码


<textarea rows="5" cols="6" onKeyPress='return maxLength(this,"30");' onpaste='return maxLengthPaste(this,"30");'></textarea>



它不允许输入超过 30个字符,同时不允许你粘贴超过 30个字符。

你可以更改代码以提醒用户重新检查它的数据。 在 return false 语句前插入一条警告消息。


//


// Any source code blocks look like this



 function maxLength(field,maxChars)


 {


 if(field.value.length >= maxChars) {


 event.returnValue=false; 


 alert("more than" +maxChars + " chars");


 return false;


 }



 } 



 function maxLengthPaste(field,maxChars)


 {


 event.returnValue=false;


 if((field.value.length + window.clipboardData.getData("Text").length) > maxChars) {


 alert("more than" +maxChars + " chars");


 return false;


 }


 event.returnValue=true;


 }



//



如果不想将字段作为参数传递给函数,则可以从事件对象中获取该字段。





var field= event!= null? event.srcElement:e.target;



你可以引用我的其他文章"更改当前焦点元素的background 颜色"来分配全局事件处理程序。 在这种情况下,不需要为一个参数作为参数,使它作为一个属性,以便 register的全局处理程序来验证长度。


<script language="javascript">


function attachEvent(name,elementName,callBack) {


 var element = elementName;


 if(typeof elementName == 'string') 


 element = document.getElementById(elementName);


 }


 if (element.addEventListener) {


 element.addEventListener(name, callBack,false);


 } else if (element.attachEvent) {


 element.attachEvent('on' + name, callBack);


 }


}


function maxLength()


 {



 var field= event!= null? event.srcElement:e.target;


 if(field.maxChars!= null) { 


 if(field.value.length> = parseInt(field.maxChars)) {


 event.returnValue=false; 


 alert("more than" +field.maxChars + " chars");


 return false;


 }


 }


 } 



 function maxLengthPaste()


 {


 event.returnValue=false;


 var field= event!= null? event.srcElement:e.target;


 if(field.maxChars!= null) {


 if((field.value.length + window.clipboardData.getData("Text").length)> parseInt(field.maxChars)) {


 alert("more than" +field.maxChars + " chars");


 return false;


 }


 }


 event.returnValue=true;


 }


</script>



生成或者创建这里 html

<rows=" 5"cols=" 6"maxlength=" 30"id="textarea1"> </textarea>


<script language="javascript">


 attachEvent("keypress","textarea1",maxLength);


 attachEvent("paste","textarea1",maxLengthPaste);


</script>



or you can assign gloabl handler


<script language="javascript">



function setTextAreaListner(eve,func) {


 var ele = document.forms[0].elements;


 for(var i = 0; i <ele.length;i++) {


 element = ele[i];


 if (element.type) {


 switch (element.type) {


 case 'textarea':


 attachEvent(eve,element,func);


 }


 }


 }


}


</script>


<script language="javascript">


 setTextAreaListner("keypress",maxLength);


 setTextAreaListner("paste",maxLengthPaste);


</script>



有关netscape剪贴板操作的信息,请参阅这里论坛

http://www.gamedev.net/community/forums/topic.asp?topic_id=281951


文本  TEX  最大  
相关文章