最近公司的项目客户在使用时报错,研究后发现,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"  οnkeyup="textarea_maxlen.isMax(10)" οnfοcus="textarea_maxlen.disabledRightMouse()"
        οnblur="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>

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

转载于:https://www.cnblogs.com/fengtengfei/p/fengtengfei.html

textarea限制输入长度相关推荐

  1. 向textarea元素输入限制长度的字符

    向textarea元素输入的字符不超过150个 <textarea name="content"  cols="60" rows="6" ...

  2. element ui textarea实现输入字数统计

    背景 最近看同行设计,input textarea如果限制字符,可以展示已输入多少个字符,总共限制多少个字符.觉得这个设计挺好,看了一下element官方文档,也可以这么实现. 具体实现 maxlen ...

  3. java 限制文本框长度_java中限制文本框输入长度的显示(转载)

    我最近在网上看到一篇文章很不错,对于限制文本框输入长度的显示很方便 JAVA不像C#能够有maxLength这个属性对文本框的输入长度进行控制,但也是有办法实现相应的功能的. 写一个MyDocumen ...

  4. 实现textarea限制输入字数

    2019独角兽企业重金招聘Python工程师标准>>> textarea称文本域,又称文本区,即有滚动条的多行文本输入控件,在网页的提交表单中经常用到.与单行文本框text控件不同, ...

  5. java 限制输入两位数_Java 控制数字输入、控制输入长度的方法 | 学步园

    问题: Java程序设计中,经常接受数量的组件,那么就必须严格控制租借只接受数字,并且第一个字符不能是0 另外,有些组件需要控制输入长度 然而,Java中并没有专门的数字文本框来专门接受数字 解决方式 ...

  6. 在uni-app的textarea中输入纯数字或者英文不换行的问题

    在uni-app的textarea中输入纯数字或者英文不换行的问题 在工作中遇到的小问题,使用uni-app的textarea,输入了一串纯数字不换行. 解决办法: 在样式中加 word-break: ...

  7. element input=number 限制输入长度,输入数字的大小和禁止输入e

    <el-input type="number"v-model="form.seq":disabled="formEdit"oninpu ...

  8. 限制输入长度,输入数字的大小和禁止输入e

    οninput="if(value>127)value=127" //限制输入的大小οnkeypress='return( /[\d]/.test(String.fromCh ...

  9. java jtextfield长度_JAVA之JTextField限制输入长度

    JTextField中,我们需要设置它的输入长度,但是呢?JAVA中没有给出具体的方法,那么只好自己来写一个了. 这里先给出第一种方法: 对于JTextField的对象,给它增加一个事件监听,每当从键 ...

最新文章

  1. JBPM4常见错误汇总
  2. Shared——The best front-end hacking cheatsheets — all in one place.
  3. 3D游戏编程入门(十五)索引缓存
  4. ajax使用json下拉框,ajax请求后台得到json数据后动态生成树形下拉框的方法
  5. 138 条 Vim 命令神操作,非常齐全,建议收藏!
  6. MySQL存储引擎InnoDB,MyISAM
  7. 洛谷2014 选课(树形DP)树形背包问题
  8. Dockerfile构建docker镜像注意事项
  9. CVS 客户端使用手册
  10. 两条边延长角会有什么变化_田园易经:什么样的风水环境会影响人的健康?
  11. layui表单验证方式大全
  12. python能编译成exe文件吗_python编译成exe文件
  13. 开机后台占用严重?教你如何清理常见后台占用
  14. USBKey使用openssl链接
  15. 元宇宙区块链卡牌游戏Defina Finance上线|详解
  16. XTU 1249 Rolling Variance
  17. FROM_UNIXTIME()函数UNIX_TIMESTAMP()函数
  18. DS18B20测量温度液晶1602显示
  19. WorldFirst公布本地化品牌名称,跨境收款万里汇!
  20. C#调用windows 相片查看器展示图片例子

热门文章

  1. Maximum Product Subarray
  2. 基于MNIST的GANs实现【Pytorch】
  3. 用Keras进行手写字体识别(MNIST数据集)
  4. 关于数学里的一些知识
  5. Spring启动执行流程梳理
  6. 15.1 自定义分词器
  7. 沼泽鳄鱼_SSL2511_矩阵乘法
  8. [转]ASP.NET中常用的文件上传下载方法
  9. 转: 利用SQL SERVER2005的XML字段类型实现类似商品扩展属性
  10. 抛硬币 直到连续出现两次字为止