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

原创于 2018-08-16 14:20:29 发布 · 5.2k 阅读

1 ·

CC 4.0 BY-SA版权

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

6 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

示例代码

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
    });