微信小程序 - 文本框显示限制最大长度
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.
