uni-app input组件在打扫码界面取消返回后无法点击获取焦点

uni-app input组件在打扫码界面取消返回后无法点击获取焦点

开发环境 版本号 项目创建方式
Windows Windows10 HBuilderX 
### 示例代码：

```html
<template>  
    <view style="padding: 30px;">  
        <button @click="scan">扫码</button>  
        <input style="background-color: #F0F0F0;padding: 10px;margin-top: 30px;" />  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                data: {}  
            }  
        },  
        onLoad() {},  
        methods: {  
            scan() {  
                uni.scanCode({ scanType: ["qrCode"] })  
            }  
        }  
    }  
</script>

操作步骤：

vue界面上放一个input， 然后点击按钮 打开扫码 uni.scanCode 点击关闭扫码 点击input无法获取焦点

预期结果：

焦点正常，能输入

实际结果：

input无法获取焦点，无法输入

bug描述：

input组件 在使用 uni.scanCode 打扫码界面后， 点击关闭取消扫码界面返回后无法点击获取焦点, 点击文本框后弹出了键盘，但是文本框没有焦点无法输入。


更多关于uni-app input组件在打扫码界面取消返回后无法点击获取焦点的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

与https://ask.dcloud.net.cn/question/136394 该问题一致 问题已确认

更多关于uni-app input组件在打扫码界面取消返回后无法点击获取焦点的实战教程也可以访问 https://www.itying.com/category-93-b0.html


HX3.3.2 alpha 已修复该问题

为什么现在还会这样? input 在打扫码界面取消返回后无法点击获取焦点

回复 4***@qq.com: 使用HX3.3.11版本验证下 目前测试正常。如果你测试依然有问题请提供测试demo

这是一个已知的 uni-app 平台差异问题，主要出现在 iOS 端。当调用 uni.scanCode 打开原生扫码界面后，再返回到页面时，页面的焦点系统可能出现异常。

问题原因： 扫码界面是一个原生全屏组件，它的显示和隐藏会干扰 Webview 的焦点管理。在 iOS 上，返回页面后，输入框的焦点状态可能未能正确恢复或同步。

解决方案：

  1. 延迟设置焦点（推荐） 在扫码返回后，使用 setTimeout 包裹一个手动聚焦的操作，强制重置焦点状态。

    scan() {
    uni.scanCode({
        scanType: ["qrCode"],
        success: () => {},
        fail: () => {},
        complete: () => {
            // 在扫码界面完全关闭后，延迟恢复焦点
            setTimeout(() => {
                this.$nextTick(() => {
                    // 这里可以主动聚焦某个input
                    // 例如通过ref获取组件实例后调用focus()
                });
            }, 100);
        }
    });
}

  2. 使用 uni.hideKeyboard() 重置 在返回页面时，先主动隐藏键盘，再重新点击输入框。

    complete: () => {
    uni.hideKeyboard();
}

  3. 条件渲染输入框（强制刷新） 通过 v-if 在扫码返回后重新渲染输入框组件。

    <input v-if="showInput" />

    scan() {
    this.showInput = false;
    uni.scanCode({
        // ... 参数
        complete: () => {
            this.$nextTick(() => {
                this.showInput = true;
            });
        }
    });
}
回到顶部