uniapp 页面滚动没有触发input的失焦事件是怎么回事？

在uniapp开发中，发现页面滚动时input输入框没有触发失焦事件。即使在滚动过程中点击了input之外的其他区域，也无法触发onBlur事件。尝试了设置@blur事件和手动调用blur()方法，但依然无效。请问这是uniapp的已知问题还是需要特殊处理？有没有解决方案？

2 回复

uniapp中页面滚动时input失焦事件未触发，可能是因为滚动容器层级问题。建议检查滚动容器是否为page或自定义scroll-view，并尝试在input上添加@blur事件，或使用@scroll监听滚动手动触发失焦。


在 UniApp 中，页面滚动时没有触发 input 的失焦事件（如 blur 事件）是常见问题，通常由以下原因及解决方案导致：

原因分析

  1. 滚动行为覆盖焦点事件：在部分平台（如 iOS 或某些 WebView 环境），滚动操作会优先处理，导致 input 元素未正常失去焦点。
  2. UniApp 的事件处理机制：UniApp 基于 Vue.js，但跨端实现可能对原生事件的支持不一致。

解决方案

1. 手动触发失焦事件

在页面滚动时，主动调用 input 的 blur 方法。通过监听页面滚动事件，强制让焦点元素失焦。

示例代码：

export default {
  data() {
    return {
      inputValue: ''
    };
  },
  methods: {
    // 绑定到页面的滚动事件
    handlePageScroll() {
      // 获取当前焦点元素并触发失焦
      uni.hideKeyboard(); // 隐藏软键盘（适用于移动端）
    }
  },
  onPageScroll(e) {
    this.handlePageScroll();
  }
};

模板中的 input 元素：

<input v-model="inputValue" @blur="onBlur" placeholder="输入内容" />

2. 使用 uni.hideKeyboard()

直接调用 UniApp 的 API 隐藏键盘，间接触发失焦：

// 在需要的地方调用，例如滚动事件、按钮点击
uni.hideKeyboard();

3. 调整页面结构或样式

  • 检查是否因 CSS 样式（如 position: fixed）导致 input 在滚动时未正常处理焦点。
  • 避免将 input 放在可滚动区域内，或使用 scroll-view 组件并监听其滚动。

4. 监听触摸事件

添加 @touchstart 事件到页面容器，在触摸时触发失焦：

<template>
  <view @touchstart="handleTouchStart">
    <!-- 页面内容 -->
    <input v-model="inputValue" />
  </view>
</template>

<script>
export default {
  methods: {
    handleTouchStart() {
      uni.hideKeyboard();
    }
  }
};
</script>

总结

  • 核心方法：结合 onPageScroll 和 uni.hideKeyboard() 手动处理。
  • 测试建议：在真机（尤其是 iOS 和 Android）上验证，因为模拟器可能无法完全复现问题。
  • 如果问题持续，检查 UniApp 版本更新或社区反馈，可能涉及框架底层优化。

通过以上方法，通常可以解决滚动时不触发失焦事件的问题。

回到顶部