问题:vue项目中的手机端点击输入框,键盘弹出
一、 先在 data 中去定义记录高度的属性
data () {
return {
defaultHeight: '0', //默认屏幕高度
nowHeight: '0', //实时屏幕高度
};
},
二、 将 onresize 事件在 mounted 挂载一下
mounted() {
//获取默认高度
this.defaultHeight = $(window).height();
window.onresize = () => {
return (() => {
//实时屏幕高度
this.nowHeight =$(window).height();
})();
};
},
三、:watch监听比较,判断键盘是否弹出,进行操作
nowHeight:function() {
if(this.defaultHeight!= this.nowHeight){
//键盘弹出操作
setTimeout(()=>{
document.activeElement.scrollIntoView(false)//焦点所在元素移动到可视区域并位于底部,可选择顶部、居中
//底部若是被挡住可以向上滚动一定距离
let scrollTop=document.body.scrollTop
window.scrollTo(0, scrollTop+100);
},200)
}else{
//键盘收起操作
}
}