相信做微信小程序的码友们都被 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 并拉起输入法键盘
主要代码:
- 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