400-920-5594
173-6014-8050
首页 > 资讯中心 > 技术分享
解决小程序文本框 placeholder 定位Bug
2019-06-25 5827 技术分享

   小程序 textarea 在真机上很多bug,又没有其他的组件可以代替,最常见就是 当页面出现滚动条,placeholder 默认提示文本会被固定到初始位置,textarea 的点击区域也会错位,再次点击的时候又能恢复?

weixinsp.jpg

要解决这个Bug其实也简单,既然 textarea 的显示有问题,那么我们可以在显示的时候使用 view 组件代替,当用户点击 view 组件的时候,替换为 原来的 textarea 输入框即可,唯一的不足就是文字会闪动一下,这倒是可以接受。

实现原理

1、定义一个文本框的初始变了 textFocus,默认为 false,同时当这个变量为false 的时候,隐藏 textarea 文本框,同时显示 view 组件。

2、当用户点击 view 的时候,设置 textFocus 为 true,显示 textarea 文本框,隐藏 view 组件。

3、单是前面两个步骤还不够,在文本框失去焦点的时候,我们还要还原初始状态,实现的代码如下。

0625112646.png

5112702.png

这里不能使用 wx:if 来判断 textarea 显示隐藏,因为if会重新渲染页面,需要一定的时间,会造成莫名其妙的Bug。