实现textarea限制输入字数

实现textarea限制输入字数（包含中文只能输入10个，全ASCII码可以输入20个）

textarea称文本域，又称文本区，即有滚动条的多行文本输入控件，在网页的提交表单中常常用到。与单行文本框text控件不一样，它不能经过maxlength属性来限制字数，为此必须寻求其余方法来加以限制以达到预设的需求。

一般的作法就是使用#脚本语言来实现对textarea文本域的字数输入限制，简单而实用。假设咱们有一个id为 txta1 的textarea文本区，咱们能够经过如下代码限制它的键盘输入字数为10个字（汉字或其余小角字符）：

＜script language="#" type="text/ecmascript"＞ 
window.onload = function() 
{ 
document.getElementById('txta1').onkeydown = function() 
{    
    if(this.value.length >= 10) 
      event.returnValue = false; 
} 
} 
＜/script＞ 
它的原理是经过对keydown（键盘键位按下）事件对指定id号的文本区进行监测，能够想象，它只能限制键盘输入，若是用户经过鼠标右键粘贴剪切板中的文本，它没法控制字数。

 

经过键盘输入，以上文本区只能输入10个字。可是，咱们的目的并无达到！请随便复制一些文本，试着用鼠标右键粘贴，看看发生了什么。

你能够在网上找到相似上述的其余JS脚本，它们无论多么优秀，其原理都是同样的，经过对keydown、keyup或keypress之类的键盘键位操做事件来监控文本区的输入，没法防止鼠标右键的粘贴，为此，若是必定要真正地限制textarea的字数，咱们还得为网页加另外一把锁——禁用鼠标右键，这无疑得付出额外的开销，同时也多是网页制做者不必定愿意作的。其实，还有一个更简单的方法，使用onpropertychange属性。

onpropertychange能够用来判断预约元素的value值，当元素的value值发生变化时判断事件就会被触发，仅关心被监测元素的value值，避开了输入的来源，从而能够比较理想地达成咱们的限制字数这一目的。它属于JS范畴，能够在表单方框区表明中嵌套使用，如下是代码和效果样式，能够像上面那样测试输入，你会发现它真正达到目的：无论用什么方式输入，它只能输入100个字（汉字或其余小解符号）：

代码：

<textarea onpropertychange="if(value.length>100) value=value.substr(0,100)" class="smallArea" cols="60" name="txta" rows="8"></textarea>

固然，为了更为保险，处理表单数据的后台脚本程序还应该对提交来的数据进行再一次的检测，若是字数超出预设的数量则进行相应处理，这样才达到真正限制字数的目的。（完）

 

 

另一种方法实现textarea限制输入字数（包含中文只能输入10个，全ASCII码可以输入20个）

<script> 
function check() { 
var regC = /[^ -~]+/g; 
var regE = /\D+/g; 
var str = t1.value; 

if (regC.test(str)){ 
    t1.value = t1.value.substr(0,10); 
} 

if(regE.test(str)){ 
    t1.value = t1.value.substr(0,20); 
} 
} 
</script> 
<textarea maxlength="10" id="t1" onkeyup="check();"> 
</textarea>

 

 

 

还有一种方式：

function textCounter(field, maxlimit) { 
if (field.value.length > maxlimit){ 
field.value = field.value.substring(0, maxlimit); 
}else{ 
document.upbook.remLen.value = maxlimit - field.value.length; 
} 
} 

<textarea name=words cols=19 rows=5 class="input1" onPropertyChange= "textCounter(upbook.words, 50) "> textarea> 
剩余字数: <input name=remLen type=text id= "remLen " style= "background-color: #D4D0C8; border: 0; color: red " value=50 size=3 maxlength=3 readonly>

 

 

function LimitTextArea(field){ 
    maxlimit=200; 
    if (field.value.length > maxlimit) 
     field.value = field.value.substring(0, maxlimit); 
       
   }

<textarea cols=50 rows=10 name="comment" id="commentarea" onKeyDown="LimitTextArea(this)" onKeyUp="LimitTextArea(this)" onkeypress="LimitTextArea(this)" ></textarea>

 

title="The textarea width must less than 300 characters." 放在textarea 里面提示输入最大字节数。

例如：<textarea title="The textarea width must less than 300 characters." cols=50 rows=10 name="comment" id="commentarea" onKeyDown="LimitTextArea(this)" onKeyUp="LimitTextArea(this)" onkeypress="LimitTextArea(this)" ></textarea>

 

从网上摘抄来的，但愿对你们有帮助哦~~

 

原文地址：http://www.cnblogs.com/butterfly/archive/2009/04/27/1444598.html