textarea输入框实时统计字数（可统计中文，英文字数）

最新推荐文章于 2025-03-10 16:10:06 发布

mh的63

最新推荐文章于 2025-03-10 16:10:06 发布

阅读量2.4k

点赞数

分类专栏： jquery js 文章标签：前端 jq

本文链接：https://blog.youkuaiyun.com/baidu_39048029/article/details/99315118

版权

jquery 同时被 2 个专栏收录

4 篇文章

订阅专栏

2 篇文章

订阅专栏

textarea输入框实时统计字数（可统计中文，英文字数）

效果图如下所示：
在这里插入图片描述
html部分：

			 <textarea name="des" id=""  rows="10" class="form-control" placeholder="描述一下房源内部的空间和设施、周边的环境和交通路线等等......."></textarea>
              <div id="num">剩余<span>500</span>个字符</div>

js部分：

//==================文本框剩余字数
function words() {
    $("#root-information2 textarea").on("input focus keyup",function () {
        let strs   = getByteLen($(this).val());
        console.log(strs.length);
        let length = strs.length;
        let num = 500-length;
        $("#num span").html(num);
    })
};
words();
//=============================获取除标点符号之外的字数
function getByteLen(val) {
    strs = val.replace(/[\ |\~|\`|\!|\@|\#|\$|\%|\^|\&|\*|\(|\)|\-|\_|\+|\=|\||\\|\[|\]|\{|\}|\;|\:|\"|\'|\,|\<|\.|\>|\/|\?|\，|\。|\？|\：|\；|\‘|\’|\”|\“|\、|\·|\！|\（|\）|\》|\《|\『|\』]/g, "");
    return strs;
}