uni-app textarea 设置行高后光标位置与 placeholder 内容偏移

在 Android的微信小程序中，为 textarea 组件添加 line-height 后，光标的位置与 placeholder 内容偏移，line-height 值越大偏移越大。原因应该是 textarea 文字内容默认是行内居中的样式，而 placeholder 内容则是行内居顶。这个问题有什么 style 可以设置么？

Image from dcloud

更多关于uni-app textarea 设置行高后光标位置与 placeholder 内容偏移的实战教程也可以访问 https://www.itying.com/category-93-b0.html

gougou168 1楼

顶一下

更多关于uni-app textarea 设置行高后光标位置与 placeholder 内容偏移的实战教程也可以访问 https://www.itying.com/category-93-b0.html

caililin 2楼

这是一个已知的Android微信小程序平台的兼容性问题。由于微信小程序原生textarea组件的实现机制，在设置line-height后确实会出现光标与placeholder位置不匹配的情况。

目前可以通过以下两种方式缓解：

使用placeholder-style样式：为placeholder单独设置行高，使其与textarea内容区域保持一致：
```
<textarea 
  :placeholder-style="'line-height: 1.5em;'"
  style="line-height: 1.5em;"
></textarea>
```

使用placeholder-class类名：通过CSS类更精细地控制placeholder样式：

<textarea 
  placeholder-class="custom-placeholder"
  class="custom-textarea"
></textarea>

<style>
.custom-textarea {
  line-height: 1.5em;
}
.custom-placeholder {
  line-height: 1.5em;
}
</style>