页面
<textarea value=’{{textAreaText}}’
bindinput=“getTextAreaTextWords”
maxlength="{{textAreaMaxLen}}"
auto-height
bindlinechange=“bindlinechange”
bindfocus=“bindfocus”
bindblur=“bindblur”
cursor-spacing=“100”>
</textarea>
data
textAreaMaxLen: 400, // 最大字符数
textAreaCurrentLen: 0, // 当前文本长度
textAreaText: “”, // 文本内容
focus:false,//是否聚焦
js
//签收表单富文本
getTextAreaTextWords: function (e) {
let that = this;
// 设置最大字符串长度(为-1时,则不限制)
let textAreaMaxLen = that.data.textAreaMaxLen;
// 文本长度
let textAreaCurrentLen = e.detail.value.length;
that.setData({
textAreaMaxLen: textAreaMaxLen,
textAreaCurrentLen: textAreaCurrentLen,
textAreaText: e.detail.value
});
},
//输入框行数变化时调用
bindlinechange: function(e) {
const that = this;
const scrollTop = Math.round(e.target.offsetTop + e.detail.height);
if (that.data.focus) {
that.setData({
scrollTop: scrollTop
})
}
},
//输入框聚焦时触发
bindfocus: function (e) {
const that = this;
that.setData({
focus:true
});
},
//输入框失去焦点时触发
bindblur: function (e) {
const that = this;
that.setData({
focus: false
});
}
css
其实cursor-spacing="100"和你这里设置的高度有关,自己调整,因为我想把底部的字数也显示出来
textarea {
display: block;
margin: 8rpx 8rpx 0 8rpx;
width: 650rpx;
min-height: 175rpx;
background-color: white;
}
我这操作可能很奇怪。如果你碰到了可以使看看能不能优化一下,改了半天了,6plus测试ok,虽然换行时刷新scroll距离顶部高度会抖动,渲染耗时操作抖动很正常,