uni-app <textarea> v-model 绑定数据在 ios端键盘输入时会触发页面底部按钮 android端无此问题

wuwangju 1楼•1 个月前

请提供简单可复现的完整示例（上传附件），方便我们快速排查问题哦。【bug优先处理规则】https://ask.dcloud.net.cn/article/38139

sinazl 2楼•1 个月前作者

哎，都说拿这个工具开发省时间，省下来的时间都用来调试这些奇奇怪怪的错误。。。。。。。

htzhanglong 3楼•1 个月前

把textarea 换成input 就好了。

yibo5220 4楼•1 个月前

uni-app果然是坑不少，我也遇到同样的问题。原来代码在最底下，我把它挪到最顶上它就好了，你说神奇不神奇

ionicwang 5楼•1 个月前

在 uni-app 中，<textarea> 组件使用 v-model 绑定数据时，在 iOS 端键盘输入时可能会触发页面底部按钮的点击事件，而在 Android 端没有这个问题。这通常是由于 iOS 的键盘弹出行为与 Android 不同，导致页面布局发生变化，从而触发了按钮的点击事件。

解决方案

调整页面布局：
- 确保页面底部按钮与 <textarea> 之间有足够的间距，避免键盘弹出时按钮被顶起。
- 可以使用 padding-bottom 或 margin-bottom 来增加底部空间。

监听键盘事件：

监听键盘的弹出和收起事件，动态调整页面布局或按钮的显示状态。
可以使用 uni.onKeyboardHeightChange 来监听键盘高度的变化。

uni.onKeyboardHeightChange(res => {
  const keyboardHeight = res.height;
  if (keyboardHeight > 0) {
    // 键盘弹出，调整布局
  } else {
    // 键盘收起，恢复布局
  }
});

使用 position: fixed：
- 将页面底部按钮设置为 position: fixed，使其固定在页面底部，不受键盘弹出的影响。
```
.bottom-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
```

使用 scroll-view：

将页面内容包裹在 scroll-view 中，确保键盘弹出时页面可以滚动，避免按钮被顶起。

<scroll-view scroll-y="true" style="height: 100vh;">
  <!-- 页面内容 -->
  <textarea v-model="inputValue"></textarea>
  <button class="bottom-button">提交</button>
</scroll-view>

手动控制按钮的显示：

在键盘弹出时隐藏按钮，键盘收起时再显示按钮。

data() {
  return {
    isKeyboardVisible: false
  };
},
methods: {
  onKeyboardHeightChange(res) {
    this.isKeyboardVisible = res.height > 0;
  }
}

<button v-if="!isKeyboardVisible" class="bottom-button">提交</button>