uni-app 导航栏使用原生搜索框页面进入自动聚焦点击屏幕别处无法取消聚焦

uni-app 导航栏使用原生搜索框页面进入自动聚焦点击屏幕别处无法取消聚焦

开发环境 版本号 项目创建方式
Windows 20H2 HBuilderX
Android 10

操作步骤：

{  
    "path": "pages/tabBar/zhibo/zhibo",  
    "style": {  
        "navigationBarTextStyle": "black",  
        "navigationBarBackgroundColor": "#FFFFFF",  
        "app-plus": {  
            "titleNView": {  
                "searchInput": {  
                    "align": "left",  
                    "backgroundColor": "#f8f8f9",  
                    "borderRadius": "15px",  
                    "placeholder": "搜索厂家直播间",  
                    "placeholderColor": "#808695"  
                }  
            }  
        }  
    }  
}

预期结果：

  • 搜索框正常显示，不会聚焦

实际结果：

  • 搜索框自动聚焦

bug描述：

{  
    "path": "pages/tabBar/zhibo/zhibo",  
    "style": {  
        "navigationBarTextStyle": "black",  
        "navigationBarBackgroundColor": "#FFFFFF",  
        "app-plus": {  
            "titleNView": {  
                "searchInput": {  
                    "align": "left",  
                    "backgroundColor": "#f8f8f9",  
                    "borderRadius": "15px",  
                    "placeholder": "搜索厂家直播间",  
                    "placeholderColor": "#808695"  
                }  
            }  
        }  
    }  
}

导航栏使用原生搜索框，页面进入就自动聚焦，点击屏幕别的地方也无法取消聚焦


更多关于uni-app 导航栏使用原生搜索框页面进入自动聚焦点击屏幕别处无法取消聚焦的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

问题排查中，已加分，感谢您的反馈！

更多关于uni-app 导航栏使用原生搜索框页面进入自动聚焦点击屏幕别处无法取消聚焦的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的 uni-app 原生导航栏搜索框的常见问题。原生搜索框在页面加载时默认会自动获取焦点，且点击页面其他区域不会自动失焦。

解决方案：

  1. 通过页面生命周期控制焦点 在页面 onLoad 或 onReady 生命周期中，使用 uni.hideKeyboard() 方法强制隐藏键盘：
onReady() {
    setTimeout(() => {
        uni.hideKeyboard()
    }, 100)
}
  1. 使用自定义导航栏替代 如果原生搜索框无法满足需求，建议使用自定义导航栏方案：
  • 在 pages.json 中设置 "navigationStyle": "custom"
  • 在页面顶部自定义实现搜索框组件
  • 通过 v-if 或样式控制搜索框的聚焦状态
  1. 监听页面点击事件 在页面中添加触摸事件，手动触发失焦：
methods: {
    handlePageTap() {
        uni.hideKeyboard()
    }
}
回到顶部