【报Bug】input设置maxlength, 粘贴文本不触发@input事件和v-model绑定变量的监听

y***@163.com (作者)

没理解, 不用小程序SDK怎么才能运行到模拟器上

2024-08-16 11:37

BFC

回复 y***@163.com: 直接用hbuilderx 运行到Android App基座 试试呢

2024-08-16 11:53

y***@163.com (作者)

回复 BFC: 同样有问题

2024-08-16 14:16

BFC

回复 y***@163.com: 发一下可复现的demo 工程， 我验证一下

2024-08-16 14:20

y***@163.com (作者)

回复 BFC:

<template>

<view>

<div class="container">

<div class="container-code-container">

<input class="container-code-container-code" :class="getFocusClass" type="number" maxlength="1"

@focus="inputDidFocus" :focus="getFocus" v-model="code" @input="inputDidChanged">

</div>

</div>

</view>

</template>

<script setup lang="ts">

import { computed, onMounted, onUnmounted, ref, watch } from "vue";

let code = ref('')  



/* 焦点输入框 */  

let selectedInput = ref<number | null>(null)  



/* 自动获取焦点逻辑 */  

const getFocus = computed(() => {  

    return true  

})  



/* 焦点输入框样式 */  

const getFocusClass = computed(() => {  

    return "check-code-focus"  

})  



onMounted(() => {  

    // #ifdef APP  

    registerKeyboardListener()  

    // #endif  

})  



onUnmounted(() => {  

    unRegisterKeyboardListener()  

})  



/* 键盘高度变化回调函数 */  

const keyboardHeightDidChanged = (result : UniNamespace.OnKeyboardHeightChangeResult) => {  

    if (result.height < 10) {  

        selectedInput.value = null  

    }  

}  



/* 注册键盘高度监听 */  

const registerKeyboardListener = () => {  

    uni.onKeyboardHeightChange(keyboardHeightDidChanged)  

}  



/* 卸载键盘高度监听 */  

const unRegisterKeyboardListener = () => {  

    uni.offKeyboardHeightChange(keyboardHeightDidChanged)  

}  



/* 输入框获得焦点 */  

const inputDidFocus = () => {  

    selectedInput.value = 0  

}  



/*   

输入框内容发生改变  

event: 事件  

 */  

const inputDidChanged = (event : any) => {  

    console.log('@input =============', event.detail.value.trim());  

}  



/*  

watch  

 */  

watch(code, (newValue) => {  

    console.log('watch =============', newValue);  

})  

</script>

<style lang="scss" scoped>

.container {

padding: 140rpx 40rpx;

    &-title {  

        font-size: 50rpx;  

    }  



    &-subtitle {  

        margin: 10rpx 0 40rpx;  

        font-size: 28rpx;  

        color: #888;  

    }  



    &-code-container {  

        margin-top: 100rpx;  

        display: flex;  

        flex-direction: row;  

        justify-content: space-between;  

        align-items: center;  



        &-code {  

            width: 84rpx;  

            height: 112rpx;  

            border: #888 solid 1rpx;  

            font-size: 50rpx;  

            text-align: center;  

        }  

    }  



    &-button {  

        margin-top: 120rpx;  

    }  

}  



.check-code-focus {  

    border: #519efb solid 1rpx;  

}  

</style>

2024-08-16 15:24

y***@163.com (作者)

回复 BFC: 你好, 有进展吗

2024-08-29 15:03

BFC

回复 y***@163.com: 收到，我验证一下

2024-08-29 15:23