当我们点击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>
0 个回复