说说小程序中textarea的坑

昨天有群友在问：小程序里textarea不能输入文字是怎么回事儿？

textarea确实有不少坑，今天给大家分离一下常见的几个坑：

1、无法获取焦点

有很多用户都给我家小程序客服反馈，说是页面无法输入内容，集中在微信6.6.7版本，之前的微信版本都正常。

经过多次测试，发现是部分安卓用户无法让textarea获取焦点，可以看这个帖子：https://developers.weixin.qq.com/blogdetail?action=get_post_info&docid=000282f680c580ef74d6575d555400

解决方法：

给textarea添加focus属性，然后绑定事件(bindtap)，当用户点击textarea时，让textarea自动获取焦点即可。

2、textarea层级太高

在小程序中，有些是系统组件，层级很高，比如：map、video、canvas、camera、live-player、live-pusher等，没办法用定位+z-index的形式来遮罩这些组件。

因此，在自定义dialog时，经常会出现dialog无法遮罩住textarea组件。

解决办法：

1、使用cover-view组件，可覆盖的原生组件，包括textarea。

2、可以换种思路：是把textarea隐藏，替换成text标签进行显示，关闭dialog时，再把textarea组件显示出来。

3、手写输入法没有保存内容

input和textarea都有一个共同的问题，用户使用手写输入法时，bindinput无法获取到用户输入的内容。

解决办法：

再添加一个bindblur事件，可以获取到手写输入法的内容。

（手写输入法，bindinput获取不到输入内容）

4、光标闪烁问题

input和textarea在输入内容时，如果在bindinput事件时，通过调用setData保存输入的内容，光标就会自动跑到最后去，这也是个大坑。

解决办法：

1、不调用setData，用event来获取form表单内容

2、setData时，设置另一个值。或者直接用this.data.xxx = e.detail.value，这种情况只会把赋值，不会重新渲染view

（setData时，光标bug截图）

《完》