textarea是官方的原生组件,用于多行输入
简单的例子,监听文本内容、长度,以及设置最大可输入文本长度
wxml
<view class='textarea-Style'>
<textarea placeholder='请输入文字' value='{{contentStr}}' bindinput="getWords" maxlength='{{maxTextLen}}'></textarea>
<view class='contentNumStyle'>{{textLen}}/{{maxTextLen}}</view>
</view>
wxss
.contentNumStyle {
display: flex;
justify-content: flex-end;
padding: 2%;
font-size: 14px;
color: #c0c6d3;
}
.textarea-Style {
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
color: #33496d;
width: 100%;
}
js
/**
* 页面的初始数据
*/
data: {
// 最大字符数
maxTextLen: 20,
// 当前文本长度
textLen: 0,
// 文本内容
contentStr: "",
},
getWords(e) {
let page = this;
// 设置最大字符串长度(为-1时,则不限制)
let maxTextLen = page.data.maxTextLen;
// 文本长度
let textLen = e.detail.value.length;
page.setData({
maxTextLen: maxTextLen,
textLen: textLen,
contentStr: e.detail.value
});
},