微信小程序完美解决textarea的坑（textarea替换）

完美解决textarea的坑

先上效果图：

解决textarea组件穿透弹窗或遮罩层：

.wxss

.view_contain1{
  width: 96%;
  height: 200rpx;
  border: 3rpx solid #6699FF;
  margin: 0 2% 0 2%;
}

.areaInput{
  width: 100%;
  height: 150rpx;
  
}

.textarea-counter {
  font-size: 24rpx;
  color: #999;
  text-align: right;
  height: 40rpx;
  line-height: 40rpx;
  padding-top: 4rpx;
}

.wxml

<text>解决页面滚动时placeholder/输入内容不随textarea组件滚动，经多方尝试，出现这种情况是textarea的某个父级元素设置了overflow属性，去掉所有父级元素的overflow属性即可解决...解决textarea组件为原生组件层级最高，穿透弹窗或遮罩层。
　　这步应该是最复杂的了，网上有很多方法但都不尽如人意。此处的解决思路是设置一个跟textarea布局一致的替代元素，与textarea交替展现。当点击替代元素时textarea展现，就可以输入内容，当textarea失去焦点时替代元素展现，将输入值赋给替代元素，这样不输入内容页面滚动时就不会出现textarea穿透问题。
　　本坑注意要设置textarea自动聚焦（否则要点两次替代元素才能拉起键盘），且两个元素的切换要用wx:if,不能用显示和隐藏</text>



<!-- 关键性代码 -->
<view class='view_contain1' data-show="1" bindtap="ifshowArea">
	<textarea wx:if="{{textareaIsShow}}" class='areaInput' bindblur="ifshowArea" data-show="0" value="{{textareaValue}}" maxlength="200" placeholder="请输入" focus="true" bindinput="textareaInput"/>

	<view wx:if="{{!textareaIsShow}}" class='areaInput' style='color:{{textareaValue==""?"#999":"#2b2b2b"}}; white-space:pre-line;'  >{{textareaValue==""?"请输入":textareaValue}}</view>
  <view class="textarea-counter">{{textareaValue.length}}/200</view>
</view>




<text>解决页面滚动时placeholder/输入内容不随textarea组件滚动，经多方尝试，出现这种情况是textarea的某个父级元素设置了overflow属性，去掉所有父级元素的overflow属性即可解决...解决textarea组件为原生组件层级最高，穿透弹窗或遮罩层。
　　这步应该是最复杂的了，网上有很多方法但都不尽如人意。此处的解决思路是设置一个跟textarea布局一致的替代元素，与textarea交替展现。当点击替代元素时textarea展现，就可以输入内容，当textarea失去焦点时替代元素展现，将输入值赋给替代元素，这样不输入内容页面滚动时就不会出现textarea穿透问题。
　　本坑注意要设置textarea自动聚焦（否则要点两次替代元素才能拉起键盘），且两个元素的切换要用wx:if,不能用显示和隐藏</text>

.js

const app = getApp()

Page({
  data: {
    
    textareaIsShow: false,    
    textareaValue: ''
  },
  onLoad: function () {

  },

  /**
   * textarea失去焦点时候触发,按view触发
   * @param {} e 
   */
  ifshowArea(e) {
    console.log('显示：', e)    
    if (e.currentTarget.dataset.show==1) { //view按了后进入
      this.setData({        
        textareaIsShow: true
      });
      
    } else { //textarea是去焦点会进入
      
      this.setData({
        // textareaValue:e.detail.value,
        textareaIsShow: false,
      })
      
    }
  },

  textareaInput(e){
    this.setData({
      textareaValue:e.detail.value,
    })
  }

})