监听键盘事件
问题：点击输入框弹出键盘遮挡文字
需求：点击输入框键盘弹起，点击别处键盘回收，输入框回到原来状态，
解决办法：
1.采用占位的思想（隐藏），文本框控制采用焦点控制，使用两个@focus和@blur这两个法控制，展示键盘，关闭键盘，这里采用v-textarea来写文本框格式，
<v-container>
<v-row>
<v-col cols="12">
<!-- 文本输入框，绑定v-model来双向绑定数据，使用ref属性以便在JS中引用 -->
<v-textarea
label="请输入文字"
v-model="text"
ref="textarea"
@focus="showKeyboard"
@blur="closeKeyboard"
></v-textarea>
</v-col>
</v-row>
</v-container>
<!-- 占位元素，用于在键盘弹出时调整页面滚动 -->
<div ref="keyboardDis" :style="{ height: keyboardVisible ? '150px' : '0' }"></div>
这里因为加了text，data数据这部分需要进行初始化，vue2属性，后面方法里面数据需要在data声明，初始化
data: () => ({
text: '',
lastHeight: 0, // 用于记录窗口高度，以便检测键盘弹出
originalScrollPosition: 0, // 用于记录原始滚动位置
keyboardVisible: false, // 控制占位元素显示的标志
lastScrollY: 0, // 记录页面滚动位置
initialViewportHeight: window.visualViewport ? window.visualViewport.height : window.innerHeight,
isInputFocused: false,
}),
之后在methods:中进行写方法这里部分通过占位元素来控制文本框位置，当文本框获得焦点时，会调用这个键盘显示的焦点，且占位键盘出现，文本框上移，当文本框失焦时候，这样隐藏占位元素恢复到原始滚动位置。
showKeyboard() {
this.keyboardVisible = true;
this.originalScrollPosition = window.scrollY; // 记录原始滚动位置
console.log("orginalscroll",this.originalScrollPosition);
this.$nextTick(() => { // 确保DOM更新完成后执行
const keyboardDis = this.$refs.keyboardDis;
keyboardDis.style.display = "block"; // 显示占位元素
// window.addEventListener('scroll', this.preventScroll, { passive: false }); // 阻止页面滚动
setTimeout(() => { // 延迟执行，确保键盘已经弹出
const scrollHeight = window.scrollY + keyboardDis.offsetHeight;
console.log("scrollheight",scrollHeight);
window.scrollTo(0, scrollHeight); // 滚动页面，使输入框可见
}, 300);
});
},
// 关闭键盘时调用的方法
closeKeyboard() {
const keyboardDis = this.$refs.keyboardDis;
keyboardDis.style.display = "none"; // 隐藏占位元素
console.log("or",this.originalScrollPosition);
window.scrollTo(0, this.originalScrollPosition); // 恢复到原始滚动位置
},
现在解决了点击文本框聚焦问题，但是现在未解决的部分是如下图右上角有个下拉箭头部分，点击收起键盘，理应文本框也会恢复原来的状态，但是目前是无法实现，
采用了事件监听方法：使用resize事件监听方法，在mounted（）加入事件监听，
window.addEventListener('resize',this.handleResize);这样需要释放，在下面写一个方法beforeDestroy()方法，里面写移除resize事件监听，
window.removeEventListener('resize', this.handleResize); // 移除窗口大小变化事件监听之后再methods中写一个方法handleResize()
handleResize() {
const currentHeight = window.innerHeight;
console.log("currentheight",currentHeight);
if (this.lastHeight && currentHeight < this.lastHeight) {
this.showKeyboard(); // 如果高度变小，可能是键盘弹出
console.log("1111",1111111);
} else {
this.closeKeyboard(); // 如果高度恢复正常，可能是键盘收起
console.log("2222",222222);
}
this.lastHeight = currentHeight; // 更新记录的窗口高度
},
但是原理就是安卓的键盘是浮于页面的，所以监听resize事件监听不到，所以上面事件不会监听到，键盘主动收起，也不会执行逻辑，但是息屏是改变resize事件，可以监听到，所以会调逻辑，
同时也尝试了监听其他事件未果，尝试了加入防抖和节流，也没有成功，
最后使用另一种文本套文本形式完成，但是最后这种组件方式更改样式，如果给文本加类控制样式，没有效果，还是会遮挡，最后改了全局样式才有改变，但是别的弹窗也会跟着一样变化。