uni-app setTitleNViewSearchInputFocus(true) 和官网uni-search-bar及input 手动点击input 键盘出现0.5s后再次消失

uni-app setTitleNViewSearchInputFocus(true) 和官网uni-search-bar及input 手动点击input 键盘出现0.5s后再次消失

信息类别 详情
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 windows10
HBuilderX类型 正式
HBuilderX版本号 3.1.2
手机系统 Android
手机系统版本号 Android 10
手机厂商 华为
手机机型 mate30 4G
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<template>  
    <view>  
        <text>上面为原生导航栏</text>  
        <view><text>官网封装好的uni-search-bar</text></view>  
        <uni-search-bar></uni-search-bar>  
        <text>原生input</text>  
        <input type="text" value=""  class="test"/>  
    </view>  
</template>  

<script>  
    let currentWebview = null  
    export default {  
        onLoad(option) {  
            // #ifdef APP-PLUS  
            currentWebview = this.$scope.$getAppWebview();  
            // #endif  
            if(option.params) {  
                this.params = JSON.parse(option.params)  
                this.doSearch()  
            } else {  
                // #ifdef APP-PLUS  
                currentWebview.setTitleNViewSearchInputFocus(true)  
                // #endif  
            }  
        },  
        data() {  
            return {  
                params: null,  
                content: null,  
            }  
        },  
        onNavigationBarButtonTap(e) {  
            this.navBack()  
        },  
        onNavigationBarSearchInputChanged(e) {  
            this.content = e.text  
        },  
        onNavigationBarSearchInputConfirmed(e) {  
            // #ifdef APP-PLUS  
            currentWebview.setTitleNViewSearchInputFocus(false)  
            // #endif  
            this.doSearch()  
        },  
        methods: {  
            doSearch() {  
                uni.showLoading()  
            }  
        }  
    }  
</script>  

<style>  
.test{  
    border: 2rpx solid #000080;  
}  
</style>

操作步骤：

<template>  
    <view>  
        <text>上面为原生导航栏</text>  
        <view><text>官网封装好的uni-search-bar</text></view>  
        <uni-search-bar></uni-search-bar>  
        <text>原生input</text>  
        <input type="text" value=""  class="test"/>  
    </view>  
</template>  

<script>  
    let currentWebview = null  
    export default {  
        onLoad(option) {  
            // #ifdef APP-PLUS  
            currentWebview = this.$scope.$getAppWebview();  
            // #endif  
            if(option.params) {  
                this.params = JSON.parse(option.params)  
                this.doSearch()  
            } else {  
                // #ifdef APP-PLUS  
                currentWebview.setTitleNViewSearchInputFocus(true)  
                // #endif  
            }  
        },  
        data() {  
            return {  
                params: null,  
                content: null,  
            }  
        },  
        onNavigationBarButtonTap(e) {  
            this.navBack()  
        },  
        onNavigationBarSearchInputChanged(e) {  
            this.content = e.text  
        },  
        onNavigationBarSearchInputConfirmed(e) {  
            // #ifdef APP-PLUS  
            currentWebview.setTitleNViewSearchInputFocus(false)  
            // #endif  
            this.doSearch()  
        },  
        methods: {  
            doSearch() {  
                uni.showLoading()  
            }  
        }  
    }  
</script>  

<style>  
.test{  
    border: 2rpx solid #000080;  
}  
</style>

预期结果：

  • 点击获取焦点后 软键盘一直存在 并且等待输入完成

实际结果：

  • 自动获取焦点 或者是手动点击获取焦点 软键盘 弹出0.5s后自动消失 此时 文字并未输入完毕 但是软键盘依然消失
  • 原生导航栏setTitleNViewSearchInputFocus(true) 和官网封装好的uni-search-bar 以及基础的input 都有一样的问题

bug描述：

【报Bug】原生导航栏setTitleNViewSearchInputFocus(true) 和官网封装好的uni-search-bar 以及input 获取焦点后 未出现键盘 手动点击input 后 键盘出现0.5s再次消失

报错信息视频


更多关于uni-app setTitleNViewSearchInputFocus(true) 和官网uni-search-bar及input 手动点击input 键盘出现0.5s后再次消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

经测试，input和uni-search-bar使用自动聚焦和手动聚焦未复现此问题。 使用示例代码测试TitleNViewSearchInput自动聚焦，进入页面聚焦后焦点随后消失，但是键盘未收起

更多关于uni-app setTitleNViewSearchInputFocus(true) 和官网uni-search-bar及input 手动点击input 键盘出现0.5s后再次消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的Android系统上uni-app的焦点问题。主要原因是Android WebView在某些机型上对输入框焦点的处理存在兼容性问题。

对于原生导航栏搜索框(setTitleNViewSearchInputFocus)，建议改用plus.nativeObj.View自定义实现搜索框，可以避免这个焦点问题。

对于uni-search-bar和原生input组件，可以尝试以下临时解决方案：

  1. 在onLoad中延迟设置焦点：
setTimeout(() => {
    currentWebview.setTitleNViewSearchInputFocus(true)
}, 300)
  1. 对于普通input，可以使用focus()方法并添加延迟：
setTimeout(() => {
    this.$refs.input.focus()
}, 300)
回到顶部