微信小程序真机测试时Textarea内字符滚动错位和键盘遮挡文本框问题的解决

字符错位

问题描述

某一页面上下长度超过一屏需要滚动的时候，若在键盘弹出的时候，快速滚动页面，输入的内容或input提示语会错位，固定为相对位置不随着父级元素滚动，且无法恢复到原有位置。

解决方法

查询文档后，发现小程序中textarea不能在scroll-view、swiper、picker-view等等里面运用。但就此改用其他父级和自己的需求不符，所以想了一个较为麻烦的替代方法，思路是：采用一个和Textarea同级的元素在不进行输入的情况之下替代textarea的展示，当用户聚焦（点击）到该替代元素时，再将替代元素隐藏，将Textarea元素显示出来，移除聚焦（点击其他区域）后再重新被替换元素替代。
代码：
实际效果：