wxml
1 view class='textarea-count'2 textarea placeholder='请输入文字' bindinput="getWords" maxlength='{{maxTextLen}}'/textarea3 view class='text-count-display f f-end'{{textLen}}/{{maxTextLen}}/view4 /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: 011 },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: textLen22 });23 }24 })
easy.
