【报Bug】通过focus属性动态设置input框聚焦，弹出软键盘后页面不会自动上推，页面底部的输入框会被键盘遮挡

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： Win10专业版 1809

HBuilderX类型：正式

HBuilderX版本号： 2.7.9

手机系统： Android

手机系统版本号： Android 9.0

手机厂商：小米

手机机型： Redmi Note 7

页面类型： vue

打包方式：云端

项目创建方式： HBuilderX

示例代码：

部分代码示例如下，详情请查看附件完整代码：

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <text class="title">动态设置焦点，软键盘打开后没有自动上推页面</text>  
        </view>  
        <view>  
            <input class="uni-input" focus placeholder="进入页面自动获得焦点" />  
        </view>  
        <view>  
            <input class="uni-input" :focus="focus" placeholder="点击按钮获得焦点" />  
        </view>  
        <view>  
            <button type="primary" @click="setFocus">点击设置聚焦</button>  
        </view>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello',  
                focus: false  
            }  
        },  
        methods: {  
            setFocus: function() {  
                this.focus = false;  
                this.$nextTick(function() {  
                    this.focus = true;  
                })  
            }  
        }  
    }  
</script>

操作步骤：

1、在页面底部创建一个input组件，并设置focus属性为true，进入页面后自动聚焦到了输入框，但是页面没有上推，输入框被软键盘遮挡。

2、手动点击输入框聚焦，可以看到页面整体上推，输入框不会被软键盘遮挡。

预期结果：

通过动态设置input的focus属性聚焦时，页面应该整体上推，避免输入框被软键盘遮挡

实际结果：

通过动态设置input的focus属性聚焦时，页面没有上推，输入框被软键盘遮挡

bug描述：

通过input组件的focus属性动态设置输入框聚焦，弹出软键盘后页面不会自动上推，输入框被遮挡。而通过手动点击输入框后弹出软键盘，页面会整体上推，不会将输入框遮挡。

test-focus-demo.zip

2020-06-09 10:28 负责人:无分享

8 个回复

DCloud_Android_ST

收到已安排验证

社交软件联盟

2.7.13版本也遇到了这个问题

2020-06-22 15:55
社交软件联盟

我的问题解决了，

本来我是通过 v-if 来判断 input的显示和获取焦点的，input上写的固定的 :focus="true"

然后以为可以通过 v-if来渲染 input，每次重新渲染都获取焦点。

小程序上是可以的。

但是app上不行，就改成了通过v-show控制input是否显示，然后 :focus="控制input是否显示的变量"

这样写，就修复了这个问题

2020-06-22 17:14
风云杭州

回复社交软件联盟: nvue不支持v-show吧？

2020-06-30 15:23
风云杭州

测试了。。 nvue也支持v-show..我用v-show 替代v-if后，也解决了弹出卡顿的问题

2020-06-30 15:29
社交软件联盟

回复风云杭州: 得在元素的外层上包一层v-show，就支持，直接给元素加v-show不支持

2020-06-30 15:45
风云杭州

回复社交软件联盟: 那不就是支持了。。。文档上却说nvue只支持v-if,而不支持v-show...。通过v-show，解决了弹出卡顿的问题了。。不过评论发送成功后，发现键盘并没有收回去。。还是要用uni.hideKeyborad 处理了键盘回收

2020-06-30 15:48