小程序的textarea完美解决所有的坑包括穿透、样式等

最新推荐文章于 2025-03-22 11:00:18 发布

zouyingyong

最新推荐文章于 2025-03-22 11:00:18 发布

阅读量7.3k

点赞数 3

分类专栏：小程序文章标签：小程序 textarea placeholder

本文链接：https://blog.csdn.net/weixin_43086811/article/details/94853321

版权

本文主要介绍了在小程序中遇到textarea的若干问题，包括页面滚动时内容穿透、placeholder样式及自动聚焦、失去焦点的问题。通过创建view并切换显示，实现了textarea的无缝衔接效果。通过设置`placeholder-class`、`focus`属性、`maxlength`和`bindblur`事件，成功解决了上述问题。

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

小程序的项目，需求非要加个备注栏，h5上面莫得任何问题，but小程序这个鬼东西，腾讯团队就是不解决，是不是不充钱的原因？

本次解决的问题：
1.页面滚动，textarea里面的内容被穿透，层级太高
2.文本框的提示语样式问题
3.textarea自动获取焦点，失去焦点的问题

解决思路：
我先写一个view，跟需求样式一致，点击的时候，view隐藏，textarea显示出来一样的样式，一样的大小，让他出现的时候自动获取焦点，键盘弹起，输入内容，点击完成，失去焦点后，textarea隐藏，赋值给view，view出现，切换看不出来大的变化，问题解决。

下面甩代码：
wxml

        <!-- 备注信息 --> 
        <view class="toast_box">
           <view bindtap='isfouce' wx:if="{
  {hiddenmodalput == true}}" class="view_box">{
  {textareaVal.length != 0?textareaVal:'请输入文本(100字以内)'}}</view> 
            <view wx:if="{
  {hiddenmodalput =