美文网首页
小程序中textarea字数限制

小程序中textarea字数限制

作者: 肥羊猪 | 来源:发表于2021-03-17 18:51 被阅读0次

    1、在textarea中绑定bindinput事件。
    2、通过var value = e.detail.value;获取textarea的值。
    3、通过 var len = parseInt(value.length);获取textarea的长度。
    wtml:

    <view class="conts">
        <textarea class="areas" placeholder='输入' minlength="{<!-- -->{min}}" maxlength="{<!-- -->{max}}" bindinput="inputs"> 
            <text class="currentWordNumber">{<!-- -->{currentWordNumber|0}}/{<!-- -->{max}}</text>
            <text class="hint">{<!-- -->{texts}}</text>
        </textarea>
    </view>
    

    wxss代码:

    .conts{
      width: 750rpx;
      height: auto;
      border: 1rpx soldi red;
      margin-top: 30rpx;
    }
    .areas{
      height:152rpx;
      font-size: 30rpx;
      text-indent: 28rpx;
      border: 1rpx solid gainsboro;
      padding-top: 30rpx;
      margin: 0 auto;
      overflow: hidden;   
      position: relative; 
    }
    .currentWordNumber{
      font-size: 28rpx;
      color: gray;
      position: absolute;
      left: 593rpx;
      top: -6rpx;
    }
    .hint{
       font-size: 28rpx;
       position: absolute;
       top: 120rpx;
       left: 30rpx;
       color: #FF6600;
    }
    

    js

    Page({
      data: {
        texts:"至少5个字",
        min:5,//最少字数
        max: 520, //最多字数 (根据自己需求改变) 
      },
     
      //字数限制  
      inputs: function (e) {
        // 获取输入框的内容
        var value = e.detail.value;
        // 获取输入框内容的长度
        var len = parseInt(value.length);
     
        //最少字数限制
        if(len <= this.data.min) 
            this.setData({
              texts: "够5个字"
            })
        else if(len > this.data.min)
        this.setData({
          texts: " "
        })
     
        //最多字数限制
        if(len > this.data.max) return;
            // 当输入框内容的长度大于最大长度限制(max)时,终止setData()的执行
            this.setData({
               currentWordNumber: len //当前字数  
            });
      }
    })
    
    

    相关文章

      网友评论

          本文标题:小程序中textarea字数限制

          本文链接:https://www.haomeiwen.com/subject/iibecltx.html