uni-app 不同页面的Input属性的@focus串联问题

uni-app 不同页面的Input属性的@focus串联问题

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.1.2

手机系统：Android

手机系统版本号：Android 9.0

手机厂商：vivo

手机机型：vivox21

页面类型：nvue

打包方式：云端

示例代码：

Scanning.vue 页  
    <view v-if="input_bool">  
                <input class="input" @confirm="confirm1" v-model="value" key="1" auto-focus="autofocus"  
                 :auto-blur="false" [@focus](/user/focus)="hidekeyboard" @click="key_bool=false" :disabled="enable_bool">
            </view>
            <view v-else>
                <input class="input" @confirm="confirm1" v-model="value" key="2" auto-focus="autofocus"  
                 :auto-blur="false" [@focus](/user/focus)="hidekeyboard" @click="key_bool=false" :disabled="enable_bool" />
            </view>
_____methods_____
        //隐藏软键盘  
            hidekeyboard() {  
                if (this.key_bool) {  
                    uni.hideKeyboard();  
                    console.log("隐藏软键盘")  
                } else {  
                    this.key_bool = true;  
                    console.log("软键盘", this.key_bool);  
                }  
            },

NativeInput.nvue 页  
<input ref="input" class="input" v-model="value" @confirm="confirm1"  
:auto-blur="false" :focus="true" :confirm-hold="true" :placeholder="placeholder" />

在打开过 Scanning.vue 后，再打开NativeInput.nvue 页，前者中input绑定的 [@focus](/user/focus)事件却对NativeInput起效。

——————console.log———— 21:14:44.061 onLoad at pages/Module/Scanning.vue:60 21:14:44.093 卸载广播 at pages/Module/Scanning.vue:86 21:14:44.125 挂载广播处理 at pages/Module/Scanning.vue:88 21:14:44.155 数据表已存在 at pages/Module/Scanning.vue:75 21:14:44.434 跳转成功 at pages/Menu/index.vue:40 21:14:44.747 隐藏软键盘 at pages/Module/Scanning.vue:201 21:14:46.816 mounted at components/ScanningPage/NativeInput.nvue:57 21:14:46.847 数据表已存在 at components/ScanningPage/NativeInput.nvue:69 21:14:46.909 跳转成功 at pages/Menu/index.vue:40 21:14:47.189 隐藏软键盘 at pages/Module/Scanning.vue:201


## 操作步骤：
1

## 预期结果：
1

## 实际结果：
1

更多关于uni-app 不同页面的Input属性的@focus串联问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

21:14:44.061 onLoad at pages/Module/Scanning.vue:60 21:14:44.093 卸载广播 at pages/Module/Scanning.vue:86 21:14:44.125 挂载广播处理 at pages/Module/Scanning.vue:88 21:14:44.155 数据表已存在 at pages/Module/Scanning.vue:75 21:14:44.434 跳转成功 at pages/Menu/index.vue:40 21:14:44.747 隐藏软键盘 at pages/Module/Scanning.vue:201 21:14:46.816 mounted at components/ScanningPage/NativeInput.nvue:57 21:14:46.847 数据表已存在 at components/ScanningPage/NativeInput.nvue:69 21:14:46.909 跳转成功 at pages/Menu/index.vue:40 21:14:47.189 隐藏软键盘 at pages/Module/Scanning.vue:201
大家注意看到 ，NativeInput.nvue 输出后又再 Scanning.vue 中输出，而 跳转成功 是菜单到 Scanning.vue。

更多关于uni-app 不同页面的Input属性的@focus串联问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


收到，将会排查

bug 确认，已加分，后续修复

HBuilderX 3.1.3 alpha 已修复

这个问题是由于uni-app中input组件的focus事件在页面切换时没有正确解绑导致的。以下是解决方案：

  1. 在Scanning.vue页面的onUnload生命周期中手动解绑事件：
onUnload() {
    this.$off('focus', this.hidekeyboard);
}
  1. 或者给两个页面的input添加不同的ref名称，避免冲突：
// Scanning.vue
<input ref="scanInput" ... />

// NativeInput.nvue  
<input ref="nativeInput" ... />
  1. 也可以尝试在NativeInput.nvue页面显示时强制重新设置focus状态：
mounted() {
    this.$nextTick(() => {
        this.$refs.input.focus();
    });
}
回到顶部