小程序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){//不显示textareathis.setData({areatext: this.data.u_remark ? this.data.u_remark:"订单备注(0/100)",areaHeight: 'margin-bottom: 90rpx;'});this.setData({ multiShow: t_show })} else {//显示textareathis.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()}
}

小程序textarea完美填坑相关推荐

QQ小程序模板消息填坑——40003、40035
QQ小程序已经推出好长时间了,但是普及程度较微信小程序差了太多.实际上QQ小程序基本算是复刻了微信小程序,但是不知道是复刻的水平有限还是官方故意为之,QQ小程序也有很多和微信小程序不一样的地方,也有好 ...
小程序项目之填坑小记
作者:首席填坑官∙苏南公众号:honeyBadger8,本文原创,著作权归作者所有,转载请注明原链接及出处. 简诉是的,真的,你没有看错,我就是上次那个加薪的,但是现在问题来了,最近又搞了个小程序 ...
微信小程序之textarea完美填坑
最近做一个出差记录,是用到textarea,遇到大家都遇到过的问题,什么层级过高,穿透之类的,下面是我经验成果总结出来的,如果有更好的请大神指教,废话不多说,直接上代码: <textarea w ...
微信小程序html2canvas,微信小程序之Canvas填坑
1用能境战求道,重件开又是正易里是了些之框.WXML-CANVAS隐藏问求圈分件圈浏第用代是水刚道.的它还题 2需朋者说上事是础一发一开程和开数的目前间.JS-CANVAS-新直能分支调二浏页器朋代说 ...
关于微信小程序textarea中的maxlength属性失效问题
关于微信小程序textarea中的maxlength属性失效问题代码菜鸡今天在编写小程序前端代码时,遇到了一个问题:textarea输入140个字以后,就再也输不进去了,想着设置一下maxlengt ...
微信小程序开发的那些坑，你踩过吗？
微信小程序开发的那些坑,你踩过吗? textarea组件value不显示 textarea组件默认值绑定data数据真机不显示问题 |?链接使用.switchTab跳转到tabbar页传递参数问题 ...
解决微信小程序textarea层级太高遮挡其他组件的问题
解决微信小程序textarea层级太高遮挡其他组件的问题参考文章: (1)解决微信小程序textarea层级太高遮挡其他组件的问题 (2)https://www.cnblogs.com/pansid ...
微信小程序 textarea 简易解决方案
微信小程序 textarea 简易解决方案参考文章: (1)微信小程序 textarea 简易解决方案 (2)https://www.cnblogs.com/bsyblog/p/6116973.ht ...
微信小程序uni.getImageInfo踩坑大计划
B站https://www.bilibili.com/read/cv6317437 如果你在使用getImageInfo的时候真机调试没问题,上传生成体验版的时候或者是线上版本没反应,主要原因是网络图 ...

小程序textarea完美填坑

小程序textarea完美填坑相关推荐

最新文章

热门文章