13570229439@163.com
13570229439@163.com
  • 发布:2020-06-09 10:28
  • 更新:2020-07-01 15:52
  • 阅读:322

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

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 2.7.9

手机系统: Android

手机系统版本号: Android 9.0

手机厂商: 小米

手机机型: Redmi Note 7

页面类型: vue

nvue编译模式: fast

打包方式: 云端

项目创建方式: 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属性动态设置输入框聚焦,弹出软键盘后页面不会自动上推,输入框被遮挡。而通过手动点击输入框后弹出软键盘,页面会整体上推,不会将输入框遮挡。

2020-06-09 10:28 负责人:无 分享
已邀请:
DCloud_Android_ST

DCloud_Android_ST

收到 已安排验证

  • 清池00后app

    2.7.13版本也遇到了这个问题

    2020-06-22 15:55

  • 清池00后app

    我的问题解决了,


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


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


    小程序上是可以的。


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


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

    2020-06-22 17:14

  • 风云杭州

    回复 清池00后app: nvue不支持v-show吧?

    2020-06-30 15:23

  • 风云杭州

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

    2020-06-30 15:29

  • 清池00后app

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

    2020-06-30 15:45

  • 风云杭州

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

    2020-06-30 15:48

820674200@qq.com

820674200@qq.com

我也是,本来是想通过点击菜单里的回复给focus设置true来唤起软键盘,结果看不到输入框了

Journey_

Journey_

好像是概率性的问题,有时会上推有时不会

清池00后app

清池00后app - 清池丨00后恋爱交友app

我是第一次的时候会往上推,第二次就不推了

清池00后app

清池00后app - 清池丨00后恋爱交友app

我的问题解决了,

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

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

小程序上是可以的。

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

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

风云杭州

风云杭州 - 请加微信18616792121,拉你进uniapp学习交流群,加的时候请备注uniapp

有试过textarea吗? 有没有遇到类似的问题?

DCloud_Android_ST

DCloud_Android_ST

是不是只有应用第一次启动会有该问题?

2482802088@qq.com

2482802088@qq.com

真的吗?

要回复问题请先登录注册