小程序textarea完美填坑

摘要:
据信,制作微信小程序的代码朋友们已经被原生组件文本区域坑了。什么样的占位符是无序的,穿透弹出窗口或掩码层,ios上的输入方法弹出,换行输入内容被阻止,当输入内容被删除时内容被阻止等等。这里的解决方案是设置一个与textarea布局一致的替代元素,并与textareb交替显示。添加setTimeout后,发现textarea的父元素应该添加一个页边空白,以将页面滚动到底,然后弹出输入方法。

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

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

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

  小程序textarea完美填坑第1张小程序textarea完美填坑第2张小程序textarea完美填坑第3张

填坑步骤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}}" 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

免责声明:文章转载自《小程序textarea完美填坑》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇ubuntu12中设置PATH环境变量的几种方法(三种办法)阅读这篇文章,假设你不知道的傅里叶变换,然后来掐死我下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

在有已认证的公众号情况下,复用资质快速注册小程序,免除再次认证费用

已经拥有认证过的公众号 快速注册认证小程序,无需重新提交主体材料、无需对公打款、无需支付300元认证费用。 第一步: 进入公众号管理后台首页 第二步: 选择左边菜单栏中的“小程序管理”,进入页面后点击“快速注册并认证小程序”。 第三步: 在快速创建小程序流程说明下,勾选,选择“快速创建” 第四步: 快速创建 第五步:公众号管理员扫描二维码验证 第...

小程序开发-小程序页面间传递数据的方式

在小程序开发中,我们小程序的不同页面间经常需要传递一些数据。针对不同的数据要求,有几种不同的传递数据方式。 1. 页面跳转通过url传递数据 在使用wx.navigateTo或者wx.redirectTo的时候,可以将部分数据放在url里面,在新页面onLoad的时候获取且初始化。 //pageA.js // Navigate wx.navigateTo...

wx.miniProgram.navigateTo跳转页面不响应,及参数传递(实用)

html方法要回到小程序原生页面的时候采用: wx.miniProgram.navigateTo({ url: '/pages/scenic/scenic_detail/scenic_detail' })   url:  / + app.json 里面要跳转的小程序页面的路径。 如果要传递参数到跳转到页面,则可以在url后面拼接,如要传递...

经验分享:程序员如何快速定位问题(BUG)

让我掉下眼泪的 不止内存泄漏 让我夜夜不眠的 不止你的需求 明天还要改多久 你攥着我的手 让我感到为难的 是善变的需求 发布总是在半夜 回滚是永远的愁 错误(Bug)随时的暴漏 困扰着我心头 作为程序员,以上这些场景你一定都经历过。今天就来聊聊如何快速定位问题。 先划重点,下文所写都是一家之言,本人工作经验不多,语言表达能力有限,如果写的不好,还望轻喷...

小程序实现单选多选功能

小程序的单选组件radio和多选组件checkbox的样式只提供更改颜色,这对实际项目中的需求显然是不够的,所以自己模拟实现一个。 踩坑点:小程序不支持操作dom 1、模拟实现多选框: 实现思路:思路非常简单,给每个选项绑定checked属性,类型为布尔值,点击取反即可 <!--wxml--> <view class='wrap'>...

textarea文本简单样式编辑

第一种方法采用替换:就是将文本域的换号符号 ,替换成其他符号,存入数据库,然后显示的时候再转换回来: //转换换行符$str=preg_replace("/ | | /","<br>",$str);//转换回来$str=preg_replace("/<br>/"," ",$str); 第二种方法使用js在线编辑器:使用js...