uni-app uni-forms 组件点击输入框自动失去焦点

uni-app uni-forms 组件点击输入框自动失去焦点

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

```html
<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


更多关于uni-app uni-forms 组件点击输入框自动失去焦点的实战教程也可以访问 https://www.itying.com/category-93-b0.html

12 回复

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

更多关于uni-app uni-forms 组件点击输入框自动失去焦点的实战教程也可以访问 https://www.itying.com/category-93-b0.html


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

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

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

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

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

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

什么情况？

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

同样问题，需要处理

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

这个问题通常是由于uni-forms组件与uni-easyinput组件版本不兼容或冲突导致的。以下是解决方案：

  1. 确保使用最新版本的uni组件：
npm update @dcloudio/uni-ui
  1. 检查组件引入方式是否正确：
// 确保在main.js中正确引入
import { uniForms, uniFormsItem, uniEasyinput } from '@dcloudio/uni-ui'
Vue.component('uni-forms', uniForms)
Vue.component('uni-forms-item', uniFormsItem)
Vue.component('uni-easyinput', uniEasyinput)
  1. 尝试修改代码结构，将表单验证逻辑改为：
methods: {
  regist() {
    this.$refs.formData.validate().then(res => {
      console.log('验证通过:', this.form)
    }).catch(err => {
      console.log('验证失败:', err)
    })
  }
}
  1. 如果问题仍然存在，可以尝试临时解决方案：
<uni-easyinput 
  type="text" 
  v-model="form.regCode" 
  placeholder="请输入注册码"
  [@input](/user/input)="()=>{}"  <!-- 添加空函数避免报错 -->
/>
回到顶部