1. 背景介绍
小程序中，textarea 是常用的表单输入组件，但它也常常会遇到一个问题，那就是当我们在<textarea>中输入数据时，被输入框覆盖的部分会发生穿透，即在无法输入的地方也能够触发事件，这个问题给用户带来了很不好的体验。接下来，我们就来探究一下这个问题的根源和解决方案。
2. 穿透问题的根源
穿透问题的根源主要是<textarea>组件的层级过高，高于了页面中其他元素的层级。在小程序中，一个页面会被分割为多个图层，每个组件都有一个各自的图层，如图所示：
如上图所示，textarea 位于一个较高的层级，导致其他图层的元素会被其覆盖，从而出现穿透的情况。那么，我们该如何解决这个问题呢？
3. 解决方案
为了解决穿透问题，我们需要让<textarea>的层级低于其他元素，从而保证其他元素能够正常被点击。可以将<textarea>的层级降低，但这样会导致<textarea>失去焦点，无法输入，因此此方法并不是行之有效的方法。
在小程序中，我们可以使用 cover-view 和 cover-image 组件来解决这个问题。它们是一种覆盖在原生组件之上的组件，重点在于覆盖在原生组件之上。这些组件的层级可以通过样式来调整，如下所示：
/* 首先，我们需要在组件上方添加一个cover-view */
<view class="input-container">
<cover-view class="cover-view"></cover-view>
<textarea class="input" placeholder="请输入文本"></textarea>
</view>
/* 接着，我们需要将 cover-view 的层级调整为最高 */
.cover-view {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
pointer-events: auto;
}
如上所示，我们可以将 cover-view 的层级调整到最高，从而实现了让其他元素覆盖在<textarea>之上的效果。使用这种方法解决穿透问题，可以让用户在输入数据的时候体验更加流畅，提升我们小程序的品质。
4. 总结
通过分析<textarea>组件层级过高导致的穿透问题的根源和解决方案，我们知道了如何解决这个让人头疼的问题。总的来说，通过使用cover-view 或 cover-image 组件将其层级调整到最高，可以有效地解决这种穿透问题，提升我们小程序的品质和用户体验。