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

偏执的太偏执、 2022-05-17 05:38 112阅读 0赞

# 1. 背景 #

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

# 2. 常用办法 #

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

# 3. 推荐办法详解 #

## 3.1. 效果图 ##

![这里写图片描述][70]  
在设计前端页面时，往往会直接通过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>

[70]: /images/20220517/bfc6660b8b9c4aaf9cbbb9e22ff014ef.png