我们知道 textarea 设置高度后，随着内容的增多，会出现滚动条。当然如果你的需求是这样，可以直接这样使用。但是也有其他需求比如：实现随着输入 textarea 内容的增多，高度会跟着内容的增多而自动增高。你也许会说小程序有 auto-height 属性，直接用它不就行了。但是用这个属性会有一个问题，那就是 placeholder 只能显示一行。如果既想实现 textarea 的高度自适应，又想 placeholder 内容多时，可以折行全部显示，该怎么办呢？
实现思路
- 在 <textarea> 中不要设置 placeholder，而是把 placeholder 的功能用 <text> 来实现。
我们可以先写一个 <text> ，然后再写一个 <textarea> 。<textarea> 的位置与 <text> 的位置重叠。然后再通过绑定 <textarea> 的 bindinput 方法来判断 <text> 显示与隐藏。而自动增高还是交由 <textarea> 的 auto-height 属性。
当然，你也可以通过判断 <textarea> 的 scrollHeight 高度来计算。但是这样就会比较复杂，而我的这种办法相对比较简单些。
实现代码
- Html
<view class='detail-view'>
<text class='detail-placeholder' hidden='{{isHidePlaceholder}}'>更详细的介绍可以帮助更快交换，如品牌、尺码、交换原因等（不超过200字）</text>
<textarea class='detail-textarea' auto-height='true' maxlength='200' bindinput='getTextareaInput'/>
</view>
- CSS
/* 实现textarea高度自适应 */
.detail-view {
/* 用于重叠 */
position: relative;
margin: 40rpx 20rpx;
min-height: 80rpx;
}
.detail-placeholder {
/* 用于重叠 */
position: absolute;
/* 用于与textarea的光标起始位置对齐 */
padding: 0 10rpx;
min-height: 100%;
color: #c9c9c9;
font-size: 28rpx;
}
.detail-textarea {
/* 用于顶部与text对齐 */
top: -12rpx;
width: 100%;
font-size: 28rpx;
}
- JS
data: {
isHidePlaceholder: false,
},
// textarea 输入时触发
getTextareaInput: function (e) {
var that = this;
if (e.detail.cursor > 0) {
that.setData({
isHidePlaceholder: true
})
} else {
that.setData({
isHidePlaceholder: false
})
}
},
