微信小程序

wxml

1 <view class='textarea-count'>
2   <textarea placeholder='请输入文字' bindinput="getWords" maxlength='{{maxTextLen}}'></textarea>
3   <view class='text-count-display f f-end'>{{textLen}}/{{maxTextLen}}</view>
4 </view>

wxss

 1 /* @import "style.wxss"; */
 2 
 3 
 4 .f{
 5   display: flex;
 6 }
 7 
 8 .f-end{
 9   justify-content: flex-end;
10 }
11 
12 .text-count-display{
13   padding: 2%;
14 }
15 
16 .textarea-count {
17   border: 1px solid #ddd;
18   border-radius: 5px;
19 }
20 
21 .textarea-count textarea{
22   width: 100%;
23 }

 1 Page({
 2 
 3   /**
 4    * 页面的初始数据
 5    */
 6   data: {
 7     // 最大字符数
 8     maxTextLen: 20,
 9     // 默认长度
10     textLen: 0
11   },
12   getWords(e) {
13     let page = this;
14     // 设置最大字符串长度(为-1时,则不限制)
15     let maxTextLen = page.data.maxTextLen;
16     // 文本长度
17     let textLen = e.detail.value.length;
18 
19     page.setData({
20       maxTextLen: maxTextLen,
21       textLen: textLen
22     });
23   }
24 })

easy.