小程序 textarea 在真机上很多bug,又没有其他的组件可以代替,最常见就是 当页面出现滚动条,placeholder 默认提示文本会被固定到初始位置,textarea 的点击区域也会错位,再次点击的时候又能恢复?
要解决这个Bug其实也简单,既然 textarea 的显示有问题,那么我们可以在显示的时候使用 view 组件代替,当用户点击 view 组件的时候,替换为 原来的 textarea 输入框即可,唯一的不足就是文字会闪动一下,这倒是可以接受。
实现原理
1、定义一个文本框的初始变了 textFocus,默认为 false,同时当这个变量为false 的时候,隐藏 textarea 文本框,同时显示 view 组件。
2、当用户点击 view 的时候,设置 textFocus 为 true,显示 textarea 文本框,隐藏 view 组件。
3、单是前面两个步骤还不够,在文本框失去焦点的时候,我们还要还原初始状态,实现的代码如下。
这里不能使用 wx:if 来判断 textarea 显示隐藏,因为if会重新渲染页面,需要一定的时间,会造成莫名其妙的Bug。