uniapp 实现监听输入框，实时获取字数

首先我们在页面构建一个能自动换行的输入框textarea，设置最大能输入2000字符，绑定事件来监听输入@input，定义自定义属性desc。

                <textarea id="PPP" placeholder="请输入活动内容" class="act_textarea" maxlength="2000" @input = "descInput($event)" data-model="desc" />
                <view class="show_number">
                    {{remnant}}/2000
                </view>
 在js中我们写入方法 如下     
           descInput:function(e){
               console.log(e)
               this.remnant = e.detail.cursor

并定义remnant  代表已经输入的字数，同时在data里面声明

data() {
        return {
          remnant:"0"
        };
      },

在页面中我们要获取到remnant,  

{{remnant}}/2000

以上即可实现实时监听字数变化。

下面附示例代码：

<template>
    <view class="aaa">
        <view class="activities">
            <view class="act_son">
                <text class="act_text">活动主题</text>
                <image src="../../static/must.png" class="act_img"></image>
                <input placeholder="请输入活动主题" class="act_input"/>
            </view>
            <view class="act_son1">
                <text class="act_text">活动内容</text>
                <image src="../../static/must.png" class="act_img"></image>
                <textarea id="PPP" placeholder="请输入活动内容" class="act_textarea" maxlength="2000" @input = "descInput($event)" data-model="desc" />
                <view class="show_number">
                    {{remnant}}/2000
                </view>
            </view>
            <view class="act_son1">
                <text class="act_text">相关附件</text>
                <image src="../../static/add1.png" class="son1_img"></image>
                <view class="uploadFile">
                    <u-upload :action="action" :file-list="fileList" ></u-upload>
                </view>
                <view class="show_number">
                    删除 X
                </view>
            </view>
            <view class="act_son2">
                <text class="act_text">发布人</text>
                <text class="act_text1">默认</text>
            </view>
        </view>
        <!-- 按钮 -->
        <input class="button" type="button" disabled="false" value="发布"/>
    </view>
</template>

<script>
    export default {
      data() {
        return {
          remnant:"0"
        };
      },
        methods:{
           descInput:function(e){
               console.log(e)
               this.remnant = e.detail.cursor
            },
          
       }
    };
</script>

<style>
    .aaa{
        background-color: #f2f2f2;
        width: 100%;
        height: 1600rpx
    }
    .activities{
        width: 92%;
        margin-left: 4%;
        background-color: white;
        border-radius: 16px;
        height: auto;
        margin-top: 35rpx;
        position: absolute;
    }
    .act_son{
        width: 100%;
        height: 50px;
        border-bottom: #e8e8e8 solid 1px;
        /* background-color: #007AFF;         */
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        line-height: 50px;
    }
    .act_son1{
        width: 100%;
        height: 200px;
        border-bottom: #e8e8e8 solid 1px;
        /* background-color: #007AFF;         */
        line-height: 50px;
        position: relative;
    }
    .act_son2{
        width: 100%;
        height: 50px;
        /* border-bottom: #e8e8e8 solid 1px; */
        /* background-color: #007AFF;         */
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
        line-height: 50px;
    }
    .act_text{
        float: left;
        color: #282828;
        font-size: 15px;
        font-weight: 550;
        margin-left: 18px;
    }
    .act_text1{
        float: left;
        color: #686868;
        font-size: 15px;
        margin-left: 28px;
    }
    .act_img{
        width: 10px;
        height: 10px;
        float: left;
        margin-left: 5px;
        margin-top: 20px;
    }
    .act_input{
        width: 480rpx;
        height: 40px;
        margin-top: 4px;
        color:#686868 ;
        float: left;
        margin-left: 10px;
        font-size: 15px;
        
    }
    .act_textarea{
        width: 480rpx;
        height: 140px;
        margin-top: 15px;
        color:#686868 ;
        font-size: 14px;
        /* background-color:#00c2de ; */
        position: absolute;
        right: 0;
    }
    .show_number{
        position: absolute;
        bottom: -5px;
        right: 18px;
        color: #686868;
        font-size: 10px;
    }
    .son1_img{
        width: 20px;
        height: 20px;
        position: absolute;
        top: 11px;
        right: 18px;
    }
    .uploadFile{
        top: 50px;
        left: 11px;
        position: absolute;
    }
    .button{
        width:335px ;
        height: 50px;
        margin-left: 20px;
        top: 570px;
        background-color: #1a70ff;
        color: white;
        font-size: 16px;
        text-align: center;
        line-height: 50px;
        position: absolute;
        border-radius: 30px;
        letter-spacing: 2px;
    }
</style>

以上就是全部啦，帮助到你的话，记得点赞哦