微信小程序textarea高度自适应及placeholder折行

我们知道 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
    })
  }
},