为什么?
为什么要随时监测屏幕大小,这是因为我们在手机端的时候,常常会遇到这样的问题:当点击输入框的时候,手机的键盘就会自动浮现,它会使得页面的可视示高度(document.body.clientHeight)发生变化。而我们的输入框就被可怜的遮挡在小键盘后面
怎么办?
我们不知道小键盘何时会出现,但有一点是可以确定的,当小键盘出现的时候,body的可视区域一定为发生变化!!当我们检测到页面的可视高度发生了变化,我们就可以确定手机的键盘出来了。于是我们就可以使用document.getElementById('×××××').scrollIntoView();把被小键盘遮挡住的输入框给上移到可视区域。
Ps:结合scrollIntoView()使用的还有activeElement,当我们页面有多个input输入框时,我们可以使用HTML5的辅助管理DOM功能,document.activeElement属性始终会引用DOM当前获得的焦点元素。可以获得当前用户焦点的元素。
document.activeElement.scrollIntoView();
监测手机小键盘弹出代码:
window.onresize = () => {
// 注意,return返回的函数为立即执行函数!!
return (() => {
window.screenHeight = document.body.clientHeight;
this.showHeight = window.screenHeight;
})()
}
当我拿到showHeight,在vue里,我就可以通过watch他的变化,然后再执行相应的逻辑代码,使用Vue.js完整代码如下:
data() {
return {
// 默认屏幕高度
docmHeight: document.documentElement.clientHeight,
showHeight: document.documentElement.clientHeight,
}
// 渲染后执行
mounted() {
window.onresize = () => {
return (() => {
window.screenHeight = document.body.clientHeight;
this.showHeight = window.screenHeight;
})()
}
},
watch: {
showHeight: 'inputType',
},
methods: {
// 检测屏幕高度变化
inputType() {
if (!this.timer) {
this.timer = true
let that = this
setTimeout(() => {
if (that.docmHeight > that.showHeight) {
that.inputfile = false;
if (document.activeElement.className === 'weui-textarea') {
document.getElementById('applyNote').scrollIntoView(); // 输入框的id为applyNote,class为weui-textarea
}
} else if (that.docmHeight <= that.showHeight) {
that.inputfile = true;
}
that.timer = false;
}, 20)
}
}
}