为什么？
为什么要随时监测屏幕大小，这是因为我们在手机端的时候，常常会遇到这样的问题：当点击输入框的时候，手机的键盘就会自动浮现，它会使得页面的可视示高度(document.body.clientHeight)发生变化。而我们的输入框就被可怜的遮挡在小键盘后面
怎么办？
方法1
我们不知道小键盘何时会出现，但有一点是可以确定的，当小键盘出现的时候，body的可视区域一定为发生变化！！当我们检测到页面的可视高度发生了变化，我们就可以确定手机的键盘出来了。于是我们就可以使用document.getElementById('×××××').scrollIntoView();把被小键盘遮挡住的输入框给上移到可视区域。
Ps:结合scrollIntoView()使用的还有activeElement，当我们页面有多个input输入框时，我们可以使用HTML5的辅助管理DOM功能，document.activeElement属性始终会引用DOM当前获得的焦点元素。可以获得当前用户焦点的元素。
1
document.activeElement.scrollIntoView();
监测手机小键盘弹出代码：
1
2
3
4
5
6
7
window.onresize = () => {
// 注意，return返回的函数为立即执行函数！！
return(() => {
window.screenHeight = document.body.clientHeight;
this.showHeight = window.screenHeight;
})()
}
当我拿到showHeight，在vue里，我就可以通过watch他的变化，然后再执行相应的逻辑代码，使用Vue.js完整代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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
letthat =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
}
}elseif(that.docmHeight <= that.showHeight) {
that.inputfile =true;
}
that.timer =false;
}, 20)
}
}
}
方法2
设置相对定位，通过top来使输入框到达合适的位置
1.js拿不到键盘的弹出和收起事件;
2.覆盖一层的键盘弹出方式不会触发window.resize事件和onscroll事件。
getElementOffsetTop(el) {
let top = el.offsetTop
let cur = el.offsetParent
while(cur != null){
top += cur.offsetTop
cur = cur.offsetParent
}
return top
}
componentDidMount() {
const u = navigator.userAgent
const isAndroid=u.indexOf('Android')>-1||u.indexOf('Linux')>-1;//android终端
// alert('android'+isAndroid)
if(isAndroid){ // android统一处理，不影响ios的自身处理
const body = document.getElementsByTagName('body')[0] // 兼容获取body
const regDom = document.querySelector('.wrapper_register') // 获取页面根元素
const content = document.querySelector('.content') // 表单内容部分
// const scrollHeight = body.scrollHeight // 网页文档高
// const scrollTop = body.scrollTop// 卷上去的高
const clientHeight = body.clientHeight //可见高
const fixHeight = clientHeight/3 // 定位高，弹出键盘时input距浏览器上部的距离，自己定义合适的
// 符合需弹出键盘的元素query
const queryStr = 'input[type="text"], input[type="tel"], input[type="password"], textarea'
const inputs = content.querySelectorAll(queryStr)
// console.log(inputs)
const offsetTopArr = Array.prototype.map.call(inputs,item=>{
return this.getElementOffsetTop(item) // offsetTop只能获取到顶部距它的offsetParent的距离，需此方法获取到元素距顶部的距离
})
inputs.forEach((item, i)=>{
item.addEventListener('focus',()=>{
// 改变top上移页面
regDom.style.top = '-' + (offsetTopArr[i] - fixHeight) + 'px'
})
item.addEventListener('blur',()=>{
// 恢复top
regDom.style.top = 0
})
})
}
}
效果基本实现，这里还有两个问题：
第一，如果下面的提交按钮是fixed，有些手机键盘弹出时会把按钮顶上来，如果上述代码中fixHeight设置不合适，会导致这个按钮遮挡输入框。所以为了统一效果，将底部按钮取消fixed，随页面滚动。
第二，如果点击键盘上的收起键盘按钮，会导致页面top无法恢复，因为没有触发输入框失焦方法，需点击空白处恢复。(目前没找到解决办法)
标签：body,解决办法,const,top,clientHeight,键盘,输入框,document
来源： /qq_41807489/article/details/96481916
