E企盈营销工具技术服务商 热线:4006-838-530

小程序的textarea完美解决所有的坑包括穿透、样式等

E企盈直播平台营销卖货系统

小程序的项目,需求非要加个备注栏,h5上面莫得任何问题,but小程序这个鬼东西,腾讯团队就是不解决,是不是不充钱的原因?本次解决的问题:1.页面滚动,textarea里面的内容被穿透,层级太高2.文本框的提示语样式问题3.textarea自动获取焦点,失去焦点的问题解决思路:我先写一个view,跟需求样式一致,点击的时候,view隐藏,textarea显示出来一样的样式,一样的大小,让他出现的时候自动获取焦点,键盘弹起,输入内容,点击完成,失去焦点后,textarea隐藏,赋值给view,view出现,切换看不出来大的变化,问题解决。下面甩代码:wxml        !– 备注信息 —         view class=”toast_box”           view bindtap=’isfouce’ wx:if=”{{hiddenmodalput == true}}” class=”view_box”{{textareaVal.length != 0?textareaVal:’请输入文本(100字以内)’}}/view             view wx:if=”{{hiddenmodalput == false}}” title=”” class=’textareaModal’                view class=”bo_box”                  textarea placeholder=’请输入文本(100字以内)’ value='{{textareaVal}}’ fixed=’true’ bindinput=’textarea’ focus=”{{Focus}}” bindblur=”getout”  maxlength=”100″ class=”box_text” placeholder-class=”t_color”/textarea                   /view            /view        /viewjs  data: {    hiddenmodalput: true,   // 控制弹窗显示隐藏    mycontent:”,    textareaVal: ”,        // textarea的文本值    hiddenmodalput:true, //弹框隐藏    Focus:false,  },  //聚焦的时候    isfouce: function () {    this.setData({      hiddenmodalput: false,      Focus:true    })  },  //失去焦点的时候,隐藏textarea,给view赋值内容,通过中间变量,在textarea隐藏的时候再赋值。  getout(e){    console.log(‘失去焦点了’)    this.setData({      hiddenmodalput: true,      Focus: true,      textareaVal: this.data.mycontent,    })  },  //textarea显示的时候,获取他的内容  textarea: function (e) {    // console.log(e)    this.setData({      mycontent: e.detail.value    })  },代码说明:1.提示语直接取class名,更改提示语,不生效或者不明显,使用placeholder-class,2.使用focus=”{{Focus}}”,Focus动态值true或者false来自动获取焦点,最开始使用autofocus,需要点击两次才能唤起软键盘,focus没有这种问题3.使用maxlength来限制输入的长度问题4.使用bindblur处理失去焦点,隐藏textarea,给view赋值的问题view效果图如下:textarea效果图:总体的样式区别不大,以上完美解决,一个个字敲得,周六还在上班,坐标武汉市光谷金融港。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序的textarea完美解决所有的坑包括穿透、样式等
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏