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 }
js
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.