微信小程序textarea的placeholder的行高怎么修改

最新推荐文章于 2025-03-17 15:08:30 发布

肖肖肖丽珠

最新推荐文章于 2025-03-17 15:08:30 发布

阅读量2.3k

点赞数 1

分类专栏：小程序文章标签：微信小程序小程序微信

本文链接：https://blog.csdn.net/qq_33769914/article/details/128701115

版权

小程序专栏收录该内容

86 篇文章

订阅专栏

当textarea的行高无法设置时，可以使用文本元素模拟placeholder，并在textarea获得焦点时隐藏该文本，以实现对齐效果。通过绝对定位和CSS样式调整，可以创建一个视觉上与textarea内容对齐的placeholder。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目前不支持修改行高。如果你的内容设置了行高但是placeholder没有行高会导致输入内容的时候感觉不是对齐的，想要解决这个问题怎么办呢/

我们可以自己写个text假装是placeholder的内容。然后textarea获取焦点输入内容的时候就不显示这个text的内容。

<view class="form-key">
   <textarea class="textarea" maxlength="-1"  model:value="{{keyWords}}"   bindfocus="focus"></textarea>
   <text class="placeholderStyle" wx:if="{{keyWords.length==0}}">输入你的祝福语或者想对Ta说的话，比如："爸妈，我爱你们"</text>
</view>

.form-key{
  position: relative;
}
.placeholderStyle{
  position:absolute;
  left:24rpx;
  top:24rpx;
  font-size:28rpx;
  line-height:44rpx;
  color:#ACB4BE;
  display:inline-block;
}