由于textarea的auto-height只支持对输入的value的auto-height，而placeholder只能显示一行，当他过长时则无法完整显示。
本次将使用text代替placeholder，实现视觉上的auto-height
wxml
<view class='detail-view'>
<text class='detail-placeholder' hidden='{{isHidePlaceholder}}' bindtap='bindtapFunc'>{{placeHolder}}</text>
<textarea class='detail-textarea' auto-height='true' value= '{{textAreaValue}}' focus= '{{focusActive}}' bindinput='getTextareaInput' bindblur="bindblur" hidden='{{isHideTextarea}}'/>
</view>
wxjs
Page({
data: {
placeHolder: '这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子这是一个很长的句子',
textAreaValue: '',
isHidePlaceholder: false,
isHideTextarea: false,
focusActive: false
},
// textarea 输入时触发
getTextareaInput: function (e) {
var that = this;
if (e.detail.cursor > 0) {
that.setData({
isHidePlaceholder: true
})
} else {
that.setData({
isHidePlaceholder: false
})
}
},
// 点击text 跳至textarea
bindtapFunc: function (e) {
var that = this;
if(e.tap = 1){
that.setData({
focusActive: true,
})
}
},
// textarea 失去焦点
bindblur: function (e) {
var value = e.detail.value;
if(value != ''){
this.setData({
isHidePlaceholder: false,
textAreaValue: '',
placeHolder: value
})}
}
})
wxss
/* 实现textarea高度自适应 */
.detail-view {
/* 用于重叠 */
position: relative;
margin: 40rpx 20rpx;
min-height: 80rpx;
}
.detail-placeholder {
/* 用于重叠 */
position: absolute;
/* 用于与textarea的光标起始位置对齐 */
min-height: 100%;
color: #c9c9c9;
font-size: 28rpx;
}
.detail-textarea {
/* 用于顶部与text对齐 */
width: 100%;
font-size: 28rpx;
}
