主要问题：
小程序textarea层级最高，和video同时存在时，video全屏textarea会穿透，设置全屏不展示textarea，但是textarea内容会丢失
场景描述：
在写一个页面的时候发现textarea和video同时存在，video 全屏查看，点击某个区域，会触发底层的textarea；
大概是这个亚子的。
设计图
解决方案：
- 首先是想的是全屏时设置textarea不显示（wx:if），但是取消全屏后，textarea内容消失，需要再次赋值上去。
试了一下，发现重新赋值这种比较麻烦，所以由这个想到了方法2 -
单独设置textarea的display属性，全屏时可以设置display:none，恢复时还原，测试没有发现问题。【害，想上个对比的前后效果录屏，结果等级太低，不能上传音频，咳咳~】
简单上个关键地方的对比图吧!下面是点击了视频头部区域唤起了键盘事件。
微信图片_20200525164337.jpg
处理了之后，可以随心所欲的点，也不会触发。
代码如下：
wxml：
<view class="content">
<view class="textarea" >
<textarea name="content" placeholder-class="input-placeholder" placeholder="分享你的故事…" cursor-spacing="30" show-confirm-bar="false" auto-height bindblur="bindTextAreaBlur"> </textarea>
</view>
<view class="source">
<view class="video" wx:if="{{videoImg}}">
<video binderror="videoErrorCallback" src='{{videoSrc}}' mode="aspectFill" play-btn-position="center" bindfullscreenchange="fullScreen">
</video>
</view>
<view wx:else bindtap="chooseVideo">选择视频</view>
</view>
</view>
wxss:
.textarea {
width: 100%;
position: relative;
z-index: 8;
background: #f0f0f0;
min-height: 300rpx;
}
JS:
// 视频全屏
fullScreen(e) {
console.log(e.detail.fullScreen);
let fullScreen = e.detail.fullScreen;
this.setData({
fullScreen: fullScreen
})
},
cursor-spacing：
而且这里发现textarea的cursor-spacing属性并没有什么太大作用。
我们是给textarea设置了最大高度，超出之后可以滚动，根据文档对cursor-spacing的说明：
指定光标与键盘的距离。取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离。
实际使用的时候发现，设置textarea是fixed，始终在底部，这个cursor-spacing设置的距离是textarea底部和键盘的距离，如果光标在第一行和第二行的时候会被遮挡，在第三行的时候才是设置的间隔高度，这个问题在微信开发者社区也提了。最后回答：
不设置固定高度，只限制最高，结合auto-height一起使用，可以避免这个问题
但实际上还是如果用户自己移动光标的位置，还是存在以上问题，最终解决是只设置了一行高度。官方没有给出合理的解释~~~
image.png
