请问如何用jQuery动态获取textarea中的字数-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

请问如何用jQuery动态获取textarea中的字数

a123456678 2016-07-14 16:48:05 1906

我想做个类似腾讯微博那种判断字数的demo,现在键盘输入都可以获取字数了,但是鼠标右键菜单中剪切和粘贴文本域中的内容不知道要怎么处理,用body的mousedown也不行,还必须事后单击下鼠标按键才能执行,请大家指点一下。。。

<html>
<head>
    <title>测试</title>
 
    <script src="jquery-1.7.2.js" type="text/javascript"></script>
 
    <script type="text/javascript" language="javascript">
        $(function() {
            $("#content").keyup(check);
        $("body").mousedown(check);
        });
 
        function check() {
            var str = $("#content").val();
            var len = strlen(str);
            var info = 140 - len;
            info = info + "";
            if (info.indexOf('.') > 0)
                info = info.substring(0, info.indexOf('.'));
            if (len <= 140) {
                $("#info1").html("还能输入");
                $("#info").css('color', 'gray');
                $("#info").html(info);
            } else {
                info = info.substr(1)
                $("#info1").html("超过");
                $("#info").css('color', 'red');
                $("#info").html(info);
            }
        }
 
        function trim(str) {
            return (str + '').replace(/(\s+)$/g, '').replace(/^\s+/g, '');
        }
 
        function strlen(str) {
            var str = trim(str);
            var len = 0;
            for (var i = 0; i < str.length; i++) {
                len += str.charCodeAt(i) > 0 && str.charCodeAt(i) < 255 ? 0.5 : 1;
            }
            return len;
        }
    </script>
 
</head>
<body>
    <form>
    <table border="0" cellpadding="0" cellspacing="0" width="500px;">
        <tr>
            <td align="right">
                <textarea id="content" cols="50" rows="10" style="overflow: auto;"></textarea>
            </td>
        </tr>
        <tr>
            <td align="right">
                <div style="vertical-align: bottom; height: 20px; line-height: 20px; margin: 0px;
                    color: Gray;">
                    <label id="info2" style="float: right; font-size: 12px;">
                        个字</label>
                    <span id="info" style="float: right; font-size: 20px; font-weight: bold;">140</span><label
                        id="info1" style="float: right; font-size: 12px;">
                        还能输入</label></div>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>
前端开发 JavaScript
分享到
取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:56:34
    <head>
        <title>测试</title>
     
        <script src="jquery-1.7.2.js" type="text/javascript"></script>
     
        <script type="text/javascript" language="javascript">
            $(function() {
                $("#content").keyup(check);
                $("#content").onpaste(check);
            });
     
            function check() {
                var str = $("#content").val();
                var len = strlen(str);
                var info = 140 - len;
                info = info + "";
                if (info.indexOf('.') > 0)
                    info = info.substring(0, info.indexOf('.'));
                if (len <= 140) {
                    $("#info1").html("还能输入");
                    $("#info").css('color', 'gray');
                    $("#info").html(info);
                } else {
                    info = info.substr(1)
                    $("#info1").html("超出");
                    $("#info").css('color', 'red');
                    $("#info").html(info);
                }
            }
     
            function trim(str) {
                return (str + '').replace(/(\s+)$/g, '').replace(/^\s+/g, '');
            }
     
            function strlen(str) {
                var str = trim(str);
                var len = 0;
                for (var i = 0; i < str.length; i++) {
                    len += str.charCodeAt(i) > 0 && str.charCodeAt(i) < 255 ? 0.5 : 1;
                }
                return len;
            }
        </script>
     
    </head>
    <body>
        <form>
        <table border="0" cellpadding="0" cellspacing="0" width="500px;">
            <tr>
                <td align="right">
                    <textarea id="content" cols="50" rows="10" style="overflow: auto;"></textarea>
                </td>
            </tr>
            <tr>
                <td align="right">
                    <div style="vertical-align: bottom; height: 20px; line-height: 20px; margin: 0px;
                        color: Gray;">
                        <label id="info2" style="float: right; font-size: 12px;">
                            个字</label>
                        <span id="info" style="float: right; font-size: 20px; font-weight: bold;">140</span><label
                            id="info1" style="float: right; font-size: 12px;">
                            还能输入</label></div>
                </td>
            </tr>
        </table>
        </form>
    </body>
    </html>
    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程