uni-app 对两个input输入框进行来回点击 会出现焦点突然丢失 拉起来的软键盘闪一下就关闭

uni-app 对两个input输入框进行来回点击 会出现焦点突然丢失 拉起来的软键盘闪一下就关闭

3 回复

我在安卓真机上 两个input 切换 改变 focus值 同样会丢失焦点~

更多关于uni-app 对两个input输入框进行来回点击 会出现焦点突然丢失 拉起来的软键盘闪一下就关闭的实战教程也可以访问 https://www.itying.com/category-93-b0.html


2023年了,这个问题还是存在,官方还是没解决。大佬,有什么好解决思路不。暂时想到用一个view盖在上面,再改变focus值,可是输入框一多起来有点麻烦

这是一个在 uni-app 开发中比较常见的软键盘焦点管理问题,通常与移动端 Webview 和原生键盘的交互机制有关。以下是几种可能的原因和对应的解决方案:

  1. 焦点切换过快导致键盘状态不稳定
    在快速切换焦点时,系统可能未及时完成键盘的收起和弹出动作,导致闪烁。建议在 @focus 事件中通过 setTimeout 延迟处理逻辑,例如:

    handleFocus() {
      setTimeout(() => {
        // 执行输入框聚焦后的操作
      }, 100);
    }
    
  2. 页面滚动或布局变化干扰
    输入框聚焦时若触发页面滚动(如被键盘顶起),可能引起布局重排导致焦点丢失。可在 pages.json 中配置:

    {
      "path": "页面路径",
      "style": {
        "app-plus": {
          "softinputMode": "adjustResize"
        }
      }
    }
    

    或尝试使用 adjustPan 模式避免布局跳动。

  3. 自定义导航栏/组件层级问题
    若页面使用了自定义导航栏或悬浮组件,可能遮挡输入框导致焦点异常。检查 z-index 层级,并通过 [@touchstart](/user/touchstart) 事件主动触发输入框聚焦:

    <view [@touchstart](/user/touchstart)="forceFocus">
      <input ref="input" />
    </view>
    
  4. 系统兼容性处理
    部分 Android 机型对键盘事件支持不一致,可尝试在 onHide 生命周期中强制重置焦点:

    onHide() {
      this.$refs.input.blur();
    }
回到顶部