微信小程序实现多行文本框，自动换行

微信小程序里面的input组件只支持单行输入，内容超出input宽度会隐藏部分内容，所以使用input组件不能达到多行文本的效果。

我们可以使用textarea组件，textarea组件的auto-height可以达到自动换行功能。

注意：使用auto-height属性后会给textarea组件上自动添加style="height:16px"，并且这个高度会自动随着文本框每增减一行而增减15px，所以给textarea设置固定高度是没用的，一般给文本的line-height最好是15px

wxml:

<view class="tar">
  <textarea model:value="{{content}}" auto-height class="textarea"></textarea>
</view>

wxss:

.tar{
  display: flex;
  padding: 10rpx 20rpx;
  background: #eee;
}
.textarea{
  flex: 1;
  padding: 20rpx;
  font-size: 32rpx;
  line-height: 15px;
  background: #fff;
  border-radius: 10rpx;
}

效果：

textarea遇到的问题：

存在获取不到的情况

场景：需要在外部通过点击时获取textarea的value。通过this.data.content有时候获取不到

原因：因为textarea 的 blur 事件会晚于页面上的 tap 事件

解决方法：通过form的submit获取。但是submit只能用在button上，如果你是一个图标按钮的话，可以设置一个绝对定位button，设置透明背景然后覆盖在图标上面就可以了，button::after默认有一个边框可以改成none