监听键盘事件
问题：点击输入框弹出键盘遮挡文字
需求：点击输入框键盘弹起，点击别处键盘回收，输入框回到原来状态，
解决办法：
1.采用占位的思想（隐藏），文本框控制采用焦点控制，使用两个@focus和@blur这两个法控制，展示键盘，关闭键盘，这里采用v-textarea来写文本框格式，
<v-container><v-row><v-col cols="12"><!-- 文本输入框，绑定v-model来双向绑定数据，使用ref属性以便在JS中引用 --><v-textarealabel="请输入文字"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事件，可以监听到，所以会调逻辑，
同时也尝试了监听其他事件未果，尝试了加入防抖和节流，也没有成功，
最后使用另一种文本套文本形式完成，但是最后这种组件方式更改样式，如果给文本加类控制样式，没有效果，还是会遮挡，最后改了全局样式才有改变，但是别的弹窗也会跟着一样变化。