小程序textarea字数限制与输入计算

微信小程序文本域字数限制

最新推荐文章于 2023-12-21 14:19:53 发布

原创最新推荐文章于 2023-12-21 14:19:53 发布 · 5.3k 阅读

微信小程序开发专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何在微信小程序中实现文本域的字数限制和实时字数统计功能，通过示例代码展示了如何设置maxlength属性及使用bindinput事件监听输入，实时更新已输入字数。

微信小程序——文本域字数限制和字数输入统计

示例代码

wxml:

<textarea   bindinput='input' rows="3" placeholder="XXXX" maxlength="60" hidden='{{dleg3}}'>
        <text class="currentWordNumber">{{currentNoteLen|0}}/{{noteMaxLen}}个字</text>
</textarea>

wxss

.currentWordNumber{
  font-size: 28rpx;
  color: gray;
  position: absolute;
  left: 520rpx;
  top: -6rpx;
  margin-top: 40px;
}

js

data: {
    noteMaxLen: 60,         //详细地址的字数限制
    currentNoteLen: 0,          //输入的字数
  },


  input(event) {
    var value = event.detail.value,
      len = parseInt(value.length);
    let that = this;
    this.setData({
      currentNoteLen: len
    });