textarea实现实时查看字数递减和总字数

左手的ㄟ右手 2022-12-20 01:54 261阅读 0赞

<!DOCTYPE html>
    <html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="renderer" content="webkit">
        <title>textarea实现文字预览</title>
        <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
    </head> 
    <body>
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">第一摘要：</label>
            <div class="col-sm-8">
                <textarea onKeyUp="checkWord(this)" onMouseDown="checkWord(this)" id="remark"
                          style="height: 100px" name="remark" cols="3" maxlength="200" class="form-control"
                          required></textarea>
                <span style="float: right"></span>
            </div>
        </div>
    
        <div class="form-group">
            <label class="col-sm-3 control-label is-required">第三摘要：</label>
            <div class="col-sm-8">
                <textarea onKeyUp="checkWord(this)" onMouseDown="checkWord(this)" id="remark3"
                          style="height: 100px" name="remark3" cols="5" maxlength="500" class="form-control"
                          required></textarea>
                <span style="float: right"></span>
            </div>
        </div>
    
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>
             var maxstrlen = 200;
    
        function checkWord(c) {
            maxstrlen = c.maxLength
            len = maxstrlen;
            var str = c.value;
            myLen = getStrleng(str);
            var wck = $('#' + c.id).next();
            if (myLen > len * 2) {
                c.value = str.substring(0, i + 1);
            } else {
             
                wck.html(maxstrlen - Math.floor((len * 2 - myLen) / 2) + "/" + maxstrlen)
            }
        }
    
        function getStrleng(str) {
            myLen = 0;
            i = 0;
            for (; (i < str.length) && (myLen <= maxstrlen * 2); i++) {
                if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128)
                    myLen++;
                else
                    myLen += 2;
            }
            return myLen;
        }
        </script>
    </body>