js右下角实现剩余字数

最新推荐文章于 2021-08-14 18:02:23 发布

lululululululu22

最新推荐文章于 2021-08-14 18:02:23 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： js 字数长度限制

本文链接：https://blog.youkuaiyun.com/lunmeifan/article/details/78711858

js 专栏收录该内容

26 篇文章

订阅专栏

该博客介绍如何在JavaScript中实现右下角显示输入框剩余字数的功能，特别是针对中文输入时的处理。建议在处理中文输入时，将长度判断逻辑放入setTimeout函数，以避免input事件频繁触发。对于英文输入，直接监听input事件并检查value长度即可。这种方法适用于Angular框架，原生JavaScript环境下则可简化为直接绑定input事件监听。

js右下角实现剩余字数

<input type='text' [(ngModel)]='purpose' (input)="checkLength(purpose)" 
maxlength='20' placeHolder="最多输入20字符">
<span>剩余{{purposeLength}}字</span>

<script>
    checkLength(purpose){
        setTimeout(()=>{
             let length = this.purpose.length;
             this.purposeLength = 20 - length;
                if(this.purposeLength <= 0){
                    this.purposeLength = 0
                }
        },0);
    }
</script>

注意⚠️
如果是对中文进行长度判断，在输入中文时，由于input事件在拼写汉字的过程中会触发，所以将长度判断的逻辑放在setTimeout函数中处理，这样会把这段逻辑处理放在另一个事件回调队列中，那么英文字母不需要这样。
此方法是基于angular，原生只需对input框绑定input监听，判断input框输入的value长度。