根据输入文本内容动态显示还可以输入多少字符

最新推荐文章于 2023-02-20 18:36:39 发布

lijwen

最新推荐文章于 2023-02-20 18:36:39 发布

阅读量1.1k

点赞数

分类专栏： js 文章标签： js 字符长度

本文链接：https://blog.csdn.net/java_18945106612/article/details/81481063

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1. 背景

在日常的开发中，常常后台异常报错：
Caused by:com.miscrosoft.sqlserver.jdbc.SQLServerException:将阶段字符串或二进制数据
这个错误通常是因为插入(insert)数据库表中某个字段过长，超过字段设置最大长度所导致的。

2. 常用办法

此类问题通常有两种解决办法：
1. ajax将数据传到后台进行解析：如果字符超长返回提示信息(该方法前后台代码逻辑较复杂，维护起来麻烦)；
2. js获取文本信息，在提交表单之前进行前台验证(推荐)。

3. 推荐办法详解

3.1. 效果图

这里写图片描述
在设计前端页面时，往往会直接通过js限制输入字符长度，为了更好地提示用户使用js动态显可输入剩余字数。

3.2. coding

以下html直接复制即可查看到效果：

<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title></title>  
</head>  
<body>  
    <form id="form1">  

         <div align="center">
            <p>文本块输入</p>
            <textarea id="content" style="height:100px;width:300px;"  onkeyup="updateContentLen(this)" ></textarea>
            <p value="aa">还可输入<span id="checklen">100</span>个字符</p>

        </div>

    </form>  
</body>  
</html>  
<script type="text/javascript">  

    // 更新文本字符长度
    function updateContentLen(content){
        // 文本内容
        var str = content.value;

        var len=0; // 文本字符长度
        for(var i=0;i<str.length;i++){
            if(  str.charAt(i).match(/[^\x00-\xff]/ig) !=null) {
                len += 2;
            }else{
                len += 1;
            }
        }

        var clen =(100-len);  // 剩余可输入字符

        // 插入到html
        document.getElementById("checklen").innerHTML = clen;

    }

</script>