动态监控textarea输入内容长度的变化

最新推荐文章于 2023-08-16 22:20:11 发布

牛油的果

最新推荐文章于 2023-08-16 22:20:11 发布

阅读量451

点赞数

分类专栏：微信小程序 js 文章标签： javascript html css 微信小程序

本文链接：https://blog.csdn.net/weixin_57633124/article/details/130843635

版权

js 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

微信小程序

10 篇文章 0 订阅

订阅专栏

1.实现功能及效果

动态监控textarea输入内容长度的变化

根据输入字数的长度改变 0 如果达到最高限制300,则 0 显示300

2.html代码

 <view class="input-bga">
        <view class="left-title">描述</view>
        <textarea bindinput="bindInputNumClick" maxlength="{{maxNumber}}" class="right-inputcontant" name="remark" placeholder="请输入房源描述"/>
        <view class="numberdouble">
            <view class="numberzero">{{currentNumber}}</view>
            <view class="numberhundredthree">/{{maxNumber}}</view>   
        </view>
      </view>

3.css代码

.input-bg{
  width: 630rpx;
  height: 98rpx;
  margin-left: 30rpx;
  border-bottom: 1rpx solid #E0E0E0;
  display: flex;
}
.left-title{
  width: 160rpx;
  height: 98rpx;
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  line-height: 98rpx;
}
.right-inputcontant{
  width: 629rpx;
  height: 200rpx;
  font-size: 32rpx;
  font-weight: 400;
  color: #333;
  text-align: left;
}
.numberdouble{
  width: 629rpx;
  display: flex;
}
.numberzero{
  height: 35rpx;
  font-size: 27rpx;
  font-weight: 500;
  color: #F42525;
  line-height: 30rpx;
  margin-left: 545rpx;
}
.numberhundredthree{
  height: 35rpx;
  font-size: 27rpx;
  font-weight: 500;
  color: #C2C2C2;
  line-height: 30rpx;
}

4.js代码

data:{
        maxNumber:300,
        currentNumber:0
}

bindInputNumClick:function(e){
    var textValue=e.detail.value
    console.log(textValue)
    var textLength=parseInt(textValue.length)
    console.log(textLength)

    if(textLength>=this.data.max){
      this.setData({
        currentNumber:this.data.maxNumber
      })
    }else{
     this.setData({
      currentNumber:textLength
     })
    }
  }