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

问题现象

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

1. 只有点击textarea的placeholder提示文字区域才能成功聚焦
2. 点击textarea其他区域无法触发聚焦
3. 该问题仅在iOS设备上出现，Android设备表现正常

问题根源分析

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

在iOS系统中，微信会根据textarea的实际内容高度来计算可点击区域，而不是根据视觉上呈现的高度。当设置了较大的minHeight时，系统可能只保留了约20px的实际可点击区域（通常就是placeholder文字所在的那一行高度），导致用户点击其他区域时无法触发聚焦。

解决方案

针对这个问题，我们提供以下几种解决方案：

方案一：移除autosize属性

最简单的解决方法是直接移除textarea的autosize属性设置，让textarea保持默认高度：

<textarea placeholder="请输入" />

这种方式适合不需要自动调整高度的场景。

方案二：合理设置minHeight值

如果确实需要自动调整高度功能，建议设置一个更合理的minHeight值，避免过大：

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

方案三：手动控制聚焦

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

<view bindtap="handleFocus">
  <textarea placeholder="请输入" focus="{{isFocus}}" autosize="{{ { minHeight: 150 } }}" />
</view>

Page({
  data: {
    isFocus: false
  },
  handleFocus() {
    this.setData({ isFocus: true });
  }
})

这种方式虽然需要额外代码，但可以完全控制聚焦行为。

技术原理深入

这个问题的本质在于微信小程序在不同平台上的实现差异：

1. iOS平台：使用原生组件实现，对可点击区域的计算更为严格，只计算实际内容区域
2. Android平台：实现方式不同，通常会将整个视觉区域都作为可点击区域

autosize属性的设计初衷是根据输入内容动态调整高度，但当设置过大的minHeight时，iOS平台会严格区分"视觉高度"和"实际可交互高度"，导致用户体验不一致。

最佳实践建议

1. 在van-action-sheet等弹出层中使用textarea时，建议先进行真机测试
2. 谨慎使用autosize的大高度值，特别是在iOS设备上
3. 考虑使用固定高度+滚动的方式替代autosize，确保交互一致性
4. 对于复杂表单场景，建议单独设计页面而不是使用action-sheet

总结

Vant Weapp作为优秀的微信小程序UI组件库，在大多数场景下表现良好，但在特定平台和特定属性组合下仍可能出现兼容性问题。开发者需要理解底层原理，合理使用组件属性，并通过充分的真机测试来确保最佳用户体验。