唬唬唬
唬唬唬
  • 发布:2020-12-22 18:05
  • 更新:2023-04-26 15:20
  • 阅读:1807

【报Bug】uni-forms 组件,点击输入框自动失去焦点

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: 18363.1198

HBuilderX类型: 正式

HBuilderX版本号: 2.9.8

第三方开发者工具版本号: 1.03.2011120

基础库版本号: 2.8.3

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="container">  
        <view class="title">用户注册</view>  
        <uni-forms ref="formData" :value="form" :rules="rules">  
            <uni-forms-item name="regCode" label="注册码" :required="true">  
                <uni-easyinput type="text" v-model="form.regCode" placeholder="请输入注册码" />  
            </uni-forms-item>  
            <uni-forms-item name="name" label="用户名" :required="true">  
                <uni-easyinput type="text" v-model="form.name" placeholder="请输入姓名" />  
            </uni-forms-item>  
            <uni-forms-item name="mobile" label="手机号" :required="true">  
                <uni-easyinput type="text" v-model="form.mobile" placeholder="请输入手机号码" />  
            </uni-forms-item>  
            <uni-forms-item name="password" label="密码" :required="true">  
                <uni-easyinput type="password" v-model="form.password" placeholder="请输入密码" />  
            </uni-forms-item>  
            <uni-forms-item name="checkCode" label="确认密码" :required="true">  
                <uni-easyinput type="password" v-model="form.checkCode" placeholder="请确认密码" />  
            </uni-forms-item>  
            <button @click="regist">注册</button>  
        </uni-forms>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                form:{  
                    regCode:'',  
                    name:'',  
                    mobile:'',  
                    password:'',  
                    checkCode:''  
                },// 表单信息  
                rules: {  
                    regCode: {  
                        rules:[  
                            {  
                                required:true,  
                                errorMessage: '注册码不能为空!',  
                            }  
                        ]  
                    },  
                    name:{  
                        rules:[  
                            {  
                                required:true,  
                                errorMessage: '姓名不能为空!',  
                            }  
                        ],  
                    },  
                    mobile:{  
                        rules:[  
                            {  
                                required:true,  
                                errorMessage: '手机号不能为空!',  
                            }  
                        ],  
                    },  
                    password:{  
                        rules:[  
                            {  
                                required:true,  
                                errorMessage: '密码不能为空!',  
                            }  
                        ],  
                    },  
                    checkCode:{  
                        rules:[  
                            {  
                                required:true,  
                                errorMessage: '请确认密码!',  
                            }  
                        ],  
                    }  
                },// 正则验证  
            };  
        },  
        methods:{  
            // 提交  
            regist(){  
                this.$refs.formData.submit().then(res=>{  
                    console.log('表单数据信息:', res);  
                }).catch(err =>{  
                    console.log('表单错误信息:', err);  
                })  
            }  
        },  
        onReady() {  
            this.$refs.formData.setRules(this.rules)  
        }  
    }  
</script>

操作步骤:

预期结果:

正常的表单输入

实际结果:

焦点的失去与获取,导致软键盘隐藏与弹出

bug描述:

真机测试以及线上微信小程序中,使用 uni-forms 组件,点击输入框自动失去焦点,有时失去焦点后又自动获取,如此反复
并且报错: _vm.onInput is not a function

2020-12-22 18:05 负责人:无 分享
已邀请:
DCloud_UNI_Anne

DCloud_UNI_Anne

未复现您的问题,请直接运行微信小程序官方示例:“小程序示例”,里面的input示例,看下是否出现一样的问题?

  • 唬唬唬 (作者)

    官方示例真机测试不了呀 uni-forms组件在 微信开发者工具 上运行也没问题,但是真机测试的时候(包括线上的小程序)就出现上面的问题

    2020-12-24 09:24

  • DCloud_UNI_Anne

    回复 唬唬唬: 打开微信,搜索“小程序示例”,看下input示例

    2020-12-24 11:51

  • 唬唬唬 (作者)

    回复 DCloud_UNI_Anne: 刚刚看了 一样的情况

    2020-12-24 14:06

  • 唬唬唬 (作者)

    回复 DCloud_UNI_Anne: 不是很懂,我在手机上看他们微信的“小程序示例”也是出现一样的问题 这和我HBuilderX 、基础库的版本有什么关系?

    2020-12-24 14:52

  • DCloud_UNI_Anne

    回复 唬唬唬:微信的“小程序示例”是这样的那就没有问题

    2020-12-24 14:58

  • 唬唬唬 (作者)

    回复 DCloud_UNI_Anne: 你可以看看楼下我发的动图 你的意思是这是微信小程序官方的bug?

    2020-12-24 15:11

唬唬唬

唬唬唬 (作者)

什么情况?

z***@163.com

z***@163.com

你好,我也遇到了这个问题,请问现在还记得解决方法吗

2***@qq.com

2***@qq.com

同样问题,需要处理

b***@163.com

b***@163.com

这么久了,官方还没回复吗

要回复问题请先登录注册