Vant Weapp中van-action-sheet嵌套textarea的聚焦问题解析

问题现象

在使用Vant Weapp组件库开发微信小程序时，开发者反馈在van-action-sheet组件中嵌套textarea输入框时，在iOS真机上出现了点击区域无法聚焦的问题。具体表现为：

1. 只有点击placeholder提示文字"请输入"的位置才能触发聚焦
2. 点击textarea其他区域无法获得焦点
3. 该问题仅在iOS真机出现，Android设备表现正常

问题原因分析

经过技术分析，这个问题主要与textarea的autosize属性设置有关。当开发者设置了autosize="{{ { minHeight: 150 } }}"时，虽然视觉上textarea区域被撑开了，但实际上微信小程序底层对可点击区域的计算存在差异：

1. 在开启autosize模式下，微信会根据实际输入内容动态计算高度
2. 但iOS系统对可点击区域的判定较为严格，实际可点击区域可能只有20px左右
3. 这种差异导致用户点击大部分区域时无法触发聚焦事件

解决方案

针对这个问题，开发者可以采取以下几种解决方案：

方案一：移除autosize属性

最简单的解决方案是直接移除textarea的autosize属性设置。这样textarea会保持固定高度，确保整个区域都可点击。

<textarea placeholder="请输入" />

方案二：合理设置autosize参数

如果确实需要自动调整高度功能，可以适当减小minHeight值，避免设置过大的最小高度：

<textarea placeholder="请输入" autosize="{{ { minHeight: 80 } }}" />

方案三：手动控制聚焦

通过监听外层view的点击事件，手动触发textarea的聚焦：

// wxml
<view bindtap="handleFocus">
  <textarea id="myTextarea" placeholder="请输入" autosize="{{ { minHeight: 150 } }}" />
</view>

// js
handleFocus() {
  this.selectComponent('#myTextarea').focus()
}

最佳实践建议

1. 在van-action-sheet等弹出层组件中使用表单元素时，建议进行充分的真机测试
2. 对于iOS设备特有的交互问题，可以优先考虑简化实现方案
3. 如果必须使用autosize功能，建议设置合理的minHeight和maxHeight值
4. 考虑添加视觉反馈，让用户明确知道可点击区域

技术原理延伸

这个问题的本质是微信小程序在不同平台上的事件处理机制差异。iOS系统对可点击区域的判定更为严格，而Android系统则相对宽松。当组件高度动态变化时，这种差异会被放大。

Vant Weapp作为跨平台组件库，虽然已经做了大量兼容性处理，但在某些特定场景下仍可能出现平台差异。开发者需要理解底层原理，才能更好地解决这类问题。