如何对textarea进行计数,如果超过固定值就不能在录入

客官°小女子只卖身不卖艺 2021-09-18 13:06 128阅读 0赞

需求推动发展。。。

### 第一种： ###

其实最简单的方式是：在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>

总结：这种方法在输入达到最大限制后，是无法输入进去，较为合理的解决了这样的问题

如过只是单纯的想限制字数，并不想写太多的话： οnkeyup="this.value = this.value.slice(0, 80)"

### 第三种： ###

<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>

总结：这种方法可以较为直观的显示出输入框中还能输入多少字符。

转载自：[https://www.cnblogs.com/fengtengfei/p/fengtengfei.html?utm\_source=tuicool][https_www.cnblogs.com_fengtengfei_p_fengtengfei.html_utm_source_tuicool]

推荐文档：[https://www.cnblogs.com/guanghuiqq/archive/2012/09/28/2707225.html][https_www.cnblogs.com_guanghuiqq_archive_2012_09_28_2707225.html]

[https_www.cnblogs.com_fengtengfei_p_fengtengfei.html_utm_source_tuicool]: https://www.cnblogs.com/fengtengfei/p/fengtengfei.html?utm_source=tuicool
[https_www.cnblogs.com_guanghuiqq_archive_2012_09_28_2707225.html]: https://www.cnblogs.com/guanghuiqq/archive/2012/09/28/2707225.html