pure111
pure111
  • 发布:2022-05-10 15:06
  • 更新:2022-05-18 01:03
  • 阅读:1080

【报Bug】【NVUE】多个input框,输入确认后自动聚焦,光标问题以及偶发聚焦问题

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10专业版 1909

HBuilderX类型: 正式

HBuilderX版本号: 3.3.13

手机系统: Android

手机系统版本号: Android 12

手机厂商: 模拟器

手机机型: 预设机型(mi 10 pro)

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

App下载地址或H5⽹址: 还未上传 (会上传示例代码) 示例代码路径:pages/componentsC/input/input.nvue 切换可清空input框和数字键盘input框

示例代码:
<view class="u-demo-block">  
            <text class="u-demo-block__title">可清空内容</text>  
            <view class="u-demo-block__content">  
                <u--input  
                    ref="clearInput"  
                    placeholder="请输入内容"  
                    border="surround"  
                    clearable  
                    @confirm="contentConfirm"  
                    @blur="contentBlur"  
                    @focus="contentFocus"  
                    v-model="content"  
                ></u--input>  
            </view>  
        </view>  
        <view class="u-demo-block">  
            <text class="u-demo-block__title">数字键盘</text>  
            <view class="u-demo-block__content">  
                <u--input  
                    ref='numberInput'  
                    placeholder="请输入内容"  
                    @blur="numberBlur"  
                    @focus="numberFocus"  
                    border="surround"  
                    type="number"  
                    clearable  
                    v-model="number"  
                ></u--input>  
            </view>  
        </view>
    methods: {  
            // 确认input框  
            contentConfirm(){  
                this.$refs['numberInput'].focus=true  
                // console.log(this.$refs['numberInput'].cursor,'cursor')  
            },  
            // 失焦  
            contentBlur(){  
                console.log('content失焦啦')  
                // this.$refs['clearInput'].focus=false  
            },  
            //聚焦  
            contentFocus(){  
                // this.$refs['clearInput'].focus=true  
                console.log('content聚焦啦')  
            },  
            //确认数字键盘框  
            numberConfirm(){  
                console.log('确认数字')  
            },  
            // 数字键盘失焦  
            numberBlur(){  
                // this.$refs['numberInput'].focus=false  
                console.log('number失焦啦')  
            },  
            // 数字键盘聚焦  
            numberFocus(){  
                // this.$refs['numberInput'].focus=true  
                console.log('number聚焦啦')  
            },  
            codeChange(text) {  
                this.tips = text;  
            },  
            getCode() {  
                if (this.$refs.uCode.canGetCode) {  
                    // 模拟向后端请求验证码  
                    uni.showLoading({  
                        title: '正在获取验证码'  
                    })  
                    setTimeout(() => {  
                        uni.hideLoading();  
                        // 这里此提示会被this.start()方法中的提示覆盖  
                        uni.$u.toast('验证码已发送');  
                        // 通知验证码组件内部开始倒计时  
                        this.$refs.uCode.start();  
                    }, 2000);  
                } else {  
                    uni.$u.toast('倒计时结束后再发送');  
                }  
            },  
            change(e) {  
                console.log('change', e);  
            }  
        }

操作步骤:

复现步骤:
在第一个input框输入值,按下确认键,自动聚焦到第二个input框

预期结果:

①自动聚焦到第二个input框
②假如有值,光标在值的后面

实际结果:

出现情况一:
①自动聚焦到第三个input框
②假如有值,光标在值的前面

出现情况二:
①自动聚焦到第二个input框中
②假如有值,光标在值的前面
③按确定键,切换第一第二个input框,光标会消失

bug描述:

NVUE页(APP端)
需求: 多个input框,当在第一个input框输入,校验正确则自动切换到下一个input框,自动聚焦
当前出现的bug:
1️⃣在第一个input框输入确认后,第二个input框不能自动聚焦,光标会跳到第三个input框中(偶发)
2️⃣在第一个input框输入后,自动聚焦成功了,但第二个input框是有值的,当前的光标 没有在值的最后面,而是在最前面,打印cursor都是-1,但界面显示的仍是在最前面
3️⃣按确定键,切换第一第二个input框,光标会消失

2022-05-10 15:06 负责人:DCloud_Android_THB 分享
已邀请:
DCloud_Android_ST

DCloud_Android_ST

问题已确认 已加分

DCloud_Android_ST

DCloud_Android_ST

nvue的input组件 获取焦点请使用focus() .官方文档有说明的。不过uView的u--input并未封装你可以联系下开发者修改下 通过focus属性实现获取焦点会有些问题

  • pure111 (作者)

    你好 我改成这样实现了


    <view>  
    <view class="u-demo-block">
    <text class="u-demo-block__title">可清空内容</text>
    <view class="u-demo-block__content">
    <input
    ref="clearInput"
    placeholder="请输入内容"
    border="surround"
    clearable
    @confirm="contentConfirm"
    @blur="contentBlur"
    @focus="contentFocus"
    v-model="content"
    />
    </view>
    </view>
    <view class="u-demo-block">
    <text class="u-demo-block__title">数字键盘</text>
    <view class="u-demo-block__content">
    <input
    ref='numberInput'
    placeholder="请输入内容"
    @blur="numberBlur"
    @focus="numberFocus"
    border="surround"
    type="number"
    clearable
    v-model="number"
    />
    </view>
    </view>
    </view>

    <script>  
    export default {
    data() {
    return {
    tips: '',
    value: '',
    content:'', //内容绑定值
    number:24, //数字键盘绑定值
    }
    },
    watch: {
    value(newValue, oldValue) {
    // console.log('v-model', newValue);
    }
    },
    methods: {
    // 确认input框
    contentConfirm(){
    this.$refs.numberInput.focus()
    console.log('focus数字键盘')
    },
    // 失焦
    contentBlur(){
    console.log('content失焦啦')
    // this.$refs['clearInput'].focus=false
    },
    //聚焦
    contentFocus(){
    // this.$refs['clearInput'].focus=true
    console.log('content聚焦啦')
    },
    //确认数字键盘框
    numberConfirm(){
    console.log('确认数字')
    },
    // 数字键盘失焦
    numberBlur(){
    // this.$refs['numberInput'].focus=false
    console.log('number失焦啦')
    },
    // 数字键盘聚焦
    numberFocus(){
    // this.$refs['numberInput'].focus=true
    console.log('number聚焦啦')
    },
    codeChange(text) {
    this.tips = text;
    },
    getCode() {
    if (this.$refs.uCode.canGetCode) {
    // 模拟向后端请求验证码
    uni.showLoading({
    title: '正在获取验证码'
    })
    setTimeout(() => {
    uni.hideLoading();
    // 这里此提示会被this.start()方法中的提示覆盖
    uni.$u.toast('验证码已发送');
    // 通知验证码组件内部开始倒计时
    this.$refs.uCode.start();
    }, 2000);
    } else {
    uni.$u.toast('倒计时结束后再发送');
    }
    },
    change(e) {
    console.log('change', e);
    }
    }
    }
    </script>

    2022-05-12 09:57

  • pure111 (作者)

    但会出现一种情况,就是我按下确认键的时候,会从第1个input框,跳到第三个input框当中并聚焦

    2022-05-12 09:58

  • DCloud_Android_ST

    回复 pure111: 切换input的bug问题我们已经确认了 只是提示用focus属性存在问题

    2022-05-12 11:00

  • pure111 (作者)

    回复 DCloud_Android_ST: 好的谢谢

    2022-05-12 11:11

DCloud_Android_THB

DCloud_Android_THB

您可以试一下,使用confirmHold="true"来解决问题。代码如下

<u--input  
                    ref='numberInput'  
                    placeholder="请输入内容"  
                    @blur="numberBlur"  
                    @focus="numberFocus"  
                    border="surround"  
                    type="number"  
                    clearable  
                    v-model="number"  
                    confirmHold="true"  
                ></u--input>

跳转到第三个input这边没有复现。

扩展组件的代码如下,其中input组件ref设置为root。

//u--input  
export default {  
        name: 'u--input',  
        mixins: [uni.$u.mpMixin, props, uni.$u.mixin],  
        components: {  
            uvInput  
        },  
        methods:{  
            focus1() {  
                this.$refs.root.focus1();  
            }  
        }  
    }  

//u-input  
focus1(){  
            this.$refs.root.focus();  
        },  
  • pure111 (作者)

    试了下 是可以的,不过我们这个是rf扫描,我是扫描完一个值,校验是否正确,正确的话就会自动聚焦到下一个输入框,同时还会用uni.hideKeyboard() 隐藏键盘,现在的这个confirmHold不是控制键盘一直存在的嘛,现在安卓模拟器上是ok的,不过还没进行真机测试,测试了之后会上来反馈

    2022-05-19 15:15

  • DCloud_Android_THB

    回复 pure111: 可以的 ,有问题随时反馈。

    2022-05-19 15:20

要回复问题请先登录注册