textarea 和video同时存在&textarea 遮挡键盘

主要问题：
小程序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