9***@tmp.dcloud.io
9***@tmp.dcloud.io
  • 发布:2025-09-16 15:37
  • 更新:2025-09-16 15:37
  • 阅读:21

屏幕上滑动会导致键盘收回

分类:uni-app

当我们点击textarea会出现键盘,点击按钮和点击scroll-view,以及界面其他位置不会导致键盘收回,为什么滑动scroll-view或者屏幕上滑动会导致键盘收回。
我们怎么做才可以在滑动scroll-view的时候,不让键盘收回。

<template>  
    <view>  
        <textarea :hold-keyboard="true" :focus="textareaFocus" @focus="handleFocus" @blur="handleBlur"></textarea>  
        <scroll-view scroll-y="true" class="scroll-Y" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">  
            <view @touchstart="handleTouchStartSub" @touchmove="handleTouchMoveSub" @touchend="handleTouchEndSub" v-for="i in 20" :key="i" :id="`app${i}`">{{i}}</view>  
        </scroll-view>  
        <button>点击按钮1</button>  
    </view>  
</template>  

<script setup>  
import { ref, nextTick } from 'vue'  
import { onShow} from '@dcloudio/uni-app';  
const textareaFocus = ref(false)  

const keyboardHeight = ref(0)  

onShow(()=>{  
    console.log(1)  

    uni.onKeyboardHeightChange((res)=>{  
        keyboardHeight.value = res.height  
        console.log("键盘高度:",keyboardHeight.value)  
        nextTick(()=>{  
            if(keyboardHeight.value === 0){  
                textareaFocus.value = true  
            }  
        })  
    })  
})  

const handleFocus = ()=>{  
    console.log("handleFocus")  
    textareaFocus.value = true  
}  

const handleBlur = () => {  
    console.log("handleBlur")  
    textareaFocus.value = false  
    nextTick(()=>{  
        if(keyboardHeight.value === 0){  
            console.log("handleBlur2")  
            textareaFocus.value = true  
        }  
    })  
}  

const handleTouchStart = (event) =>{  
    console.log("handleTouchStart")  
    // 如果textarea有焦点,阻止默认行为  
    if (textareaFocus.value) {  
        console.log("阻止事件冒泡,防止触发失焦")   
        event.stopPropagation()  
    }  
}  

const handleTouchStartSub = (event) => {  
    console.log("handleTouchStartSub")  
    if (textareaFocus.value) {  
        console.log("阻止事件冒泡,防止触发失焦")   
        event.stopPropagation()  
    }  
}  

const handleTouchEndSub = (event) => {  
    console.log("handleTouchEndSub")  
    if (textareaFocus.value) {  
        console.log("阻止事件冒泡,防止触发失焦")   
        event.stopPropagation()  
    }  
}  

const handleTouchMoveSub = (event) => {  
    console.log("handleTouchMoveSub")  
    // 如果textarea有焦点,阻止默认行为  
    if (textareaFocus.value) {  
        console.log("阻止事件冒泡,防止触发失焦")   
        event.stopPropagation()  
    }  
}  

const handleTouchMove = (event) => {  
    console.log("handleTouchMove")  
    if (textareaFocus.value) {  
        console.log("让滚动继续,但不触发失焦")  
        event.preventDefault() // 阻止默认行为  
        event.stopPropagation()  
        return true  
    }  
}  

const handleTouchEnd = (event) => {  
    console.log("handleTouchEnd")  
    if (textareaFocus.value) {  
        console.log("阻止事件冒泡,防止触发失焦")   
        event.preventDefault() // 阻止默认行为  
        event.stopPropagation()  
    }  
}  

</script>  

<style>  
  .scroll-Y {  
        height: 200rpx;  
        background-color: blueviolet;  
    }       
</style>
2025-09-16 15:37 负责人:无 分享
已邀请:

要回复问题请先登录注册