小程序textarea完美填坑

　　相信做微信小程序的码友们都被textarea这个原生组件坑过，什么placeholder位置错乱，穿透弹窗或遮罩层，ios上输入法弹起后换行输入内容遮挡，删除输入内容时内容被遮挡等等。。。

反正综上所述我全遇到了，埋完一个坑又出一个新坑，在埋坑过程中数次想过放弃（就想跟老板说这是小程序的bug解决不了），但想想自己曾经夸下的海口（没有搞不定的，只有不想搞的），又默默地把手放在鼠标键盘上!

　　先上一个完美填坑后的效果图:

　　

填坑步骤1：

　　解决页面滚动时placeholder/输入内容不随textarea组件滚动，经多方尝试，出现这种情况是textarea的某个父级元素设置了overflow属性，去掉所有父级元素的overflow属性即可解决

 填坑步骤2：
　　解决textarea组件为原生组件层级最高，穿透弹窗或遮罩层。
　　这步应该是最复杂的了，网上有很多方法但都不尽如人意。此处的解决思路是设置一个跟textarea布局一致的替代元素，与textarea交替展现。当点击替代元素时textarea展现，就可以输入内容，当textarea失去焦点时替代元素展现，将输入值赋给替代元素，这样不输入内容页面滚动时就不会出现textarea穿透问题。

　　本坑注意要设置textarea自动聚焦（否则要点两次替代元素才能拉起键盘），且两个元素的切换要用wx:if,不能用显示和隐藏

  填坑步骤3：

 　　解决ios上输入法弹起后换行输入内容遮挡，删除输入内容时内容被遮挡问题
　　第二步骤完成时在安卓机上已经能很完美的使用textarea了，可在坑b的ios上还是无一例外的出现了各种奇怪问题。输入法弹起输入到第三行时底部的结算栏上去了，输入内容直接跑结算栏里还穿透了！！！输入多行删除输入内容时内容直接被输入法弹窗遮挡了！！！奋战许久填的坑，在ios上全线溃败，这让我情何以堪！！（实在忍不住，说了这么多废话。。。）
　　多方尝试给textarea的父级元素加个margin-bottom，并且这个值足够大在ios就不会出现这种问题，于是尝试在展现textarea加大textarea的父级元素加个margin-bottom，展现替代元素时再将这个值恢复原值，心心念念写好了代码以为解决了，现实又给了我一记响亮的大耳刮。原设有margin-bottom行，后改的不认、不认、不认呀！！加了个setTimeout发现加大textarea的父级元素加个margin-bottom后要将页面滚动到底部此时再弹出输入法就可以了。
     综上，步骤3就是要给textarea的父级元素加个margin-bottom，具体多少视情况而定（反正不够就一直加呗），在点击替代元素后先给textarea的父级元素加个margin-bottom，然后将页面滚动到底部，最后再展现textarea并拉起输入法键盘
主要代码：

<view class='bgcfff font28 padd30 new_borders1'style='{{areaHeight}}'>
　　<textarea wx:if="{{!multiShow}}" class='areaInput' bindblur="ifshowArea" data-show="yes" value="{{u_remark}}"bindinput='inputchange'maxlength="100" data-type="u_remark"auto-height placeholder="订单备注(0/100)" focus="true" />
　　<view wx:if="{{multiShow}}" style='min-height:20px;color:{{areatext=="订单备注(0/100)"?"#999":"#2b2b2b"}};' data-show="no" bindtap="ifshowArea">{{areatext}}</view>
</view>

data: {
　　areatext:'订单备注(0/100)',
　　areaHeight: 'margin-bottom: 90rpx;',
　　multiShow:true,
　　u_remark:""
},
ifshowArea(e){
　　var t_show = e.currentTarget.dataset.show=="yes"?true:false;
　　if (t_show){//不显示textarea
　　　　this.setData({
　　　　　　areatext: this.data.u_remark ? this.data.u_remark:"订单备注(0/100)",
　　　　　　areaHeight: 'margin-bottom: 90rpx;'
　　　　});
　　　　this.setData({ multiShow: t_show })
　　} else {//显示textarea
　　　　this.setData({
　　　　　　areaHeight:' margin-bottom: 250rpx;'
　　　　});
　　　　wx.createSelectorQuery().select('.j_page').boundingClientRect((rect)=> {
　　　　　　console.log(rect)
　　　　　　// 使页面滚动到底部
　　　　　　wx.pageScrollTo({
　　　　　　　　scrollTop: rect.bottom
　　　　　　})
　　　　　　this.setData({
　　　　　　　　multiShow: t_show
　　　　　　})
　　　　}).exec()
　　}
}

 

　　码字不易，转载请注明出处https://www.cnblogs.com/growupup/p/9799507.html

转载于:https://www.cnblogs.com/growupup/p/9799507.html