textarea限制输入长度
最近公司的项目客户在使用时报错,研究后发现,textarea输入框,输入值的长度超过了数据库中定义的长度,所以造成了,前台的错误,因此要对前台输入框的输入的长度进行限制;经过研究后发现,一下几种方法可以较好地解决问题:
备注:其实对于数据长度的验证,我们可以在提交前,以及提交后进行验证,但是我们的这个出现问题的,由于某些原因是不能在提交后进行验证,所以我研究了下几种前台验证的方式,供以后有需要的同志参考。
第一种:
其实最简单的方式是:在submit提交前进行这样的if判断,不用js验证即可,而且较为直观
if(document.getElementById("textarea的id的名字").value.length >200){
   alert您输入的字数超出限制,最多录入200个字。");
   return false;
  }
第二种:
<html>
    <head>
        <title>
        </title>
        <script type="text/javascript">
            var textarea_maxlen = {
                isMax: function(max_length) {
                    var textarea = document.getElementById("area"); 
                    if (textarea.value.length > max_length) {
                        textarea.value = textarea.value.substring(0,max_length);
                    }
                },
                disabledRightMouse: function() {
                    document.oncontextmenu = function() {
                        return false;
                    }
                },
                enabledRightMouse: function() {
                    document.oncontextmenu = null;
                }
            };
        </script>
    </head>
    <body>
 请输入内容:
        <br><textarea id="area"  onkeyup="textarea_maxlen.isMax(10)" onfocus="textarea_maxlen.disabledRightMouse()"
        onblur="textarea_maxlen.enabledRightMouse()" >
        </textarea>
    </body>
</html>
总结:这种方法在输入达到最大限制后,是无法输入进去,较为合理的解决了这样的问题
第三种:
<html> 
<head> 
<title>限制Textare输入数值的个数</title> 
<meta http-equiv="Content-Type" 
content="text/html; charset=gb2312" /> 
<script language="JavaScript">    
function textCounter(field, countfield, maxlimit) {    
 // 函数,3个参数,表单名字,表单域元素名,限制字符;    
 if (field.value.length > maxlimit)    
 //如果元素区字符数大于最大字符数,按照最大字符数截断;    
 fieldfield.value = field.value.substring(0, maxlimit);    
 else    
 //在记数区文本框内显示剩余的字符数;    
 countfield.value = maxlimit - field.value.length;    
}    
</script> 
 </head> 
  <body> 
   <form name=myform action=""> 
      <textarea name="message" cols="28" rows="5"
       onKeyDown="textCounter(this.form.message,this.form.remLen,10);"
       onKeyUp="textCounter(this.form.message,
       this.form.remLen,10);">
    </textarea> 
      您还可以输入:<input name="remLen" type="text" value="10" size="3" readonly="readonly">个字符  
   </form> 
 </body> 
</html>
总结:这种方法可以较为直观的显示出输入框中还能输入多少字符。
 
                    
                     
                    
                 
                    
                 
                
            
         
         浙公网安备 33010602011771号
浙公网安备 33010602011771号