最近在做移动端开发，每过一段时间，发现又出现新的兼容问题，这次也不例外。
ios手机
之前ios手机是没有问题的，昨天测试的时候发现键盘弹出不会有遮挡input表单的问题，但是输入完成，键盘收回后发现，页面会有一个空白位置没有收回
键盘收回.jpeg
键盘弹出.jpeg
可以在失去input焦点blur的时候用scrollTo做个处理还原页面的位置
function getPlat() {
let u = navigator.userAgent;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //判断是否是 android终端
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //判断是否是 iOS终端
if (isAndroid) {
return 'Android';
} else if (isIOS) {
return 'IOS';
} else {
return 'PC';
}
}
if (getPlat() === 'IOS') {
setTimeout(() => {
const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
window.scrollTo(0, Math.max(scrollHeight - 1, 0));
}, 0);
}
Android手机（测试机有oppo、华为、三星、锤子）
但是在Android 手机中就没有这么容易了，测试发现，安卓手机中如果不做任何处理，弹出的键盘会遮盖输入框，但是键盘弹出后手动滚动页面，收回键盘，在聚焦弹出键盘就会定位到上次滚动的地方。其实这样也还好，但是测试要求想要自动展示到键盘上方。所以我需要做些兼容处理
经检测有几种解决办法：
一、修改输入登录模块的定位用fixed、会跟着键盘一起动，可以在聚焦失焦给样式做些处理，但是会麻烦一些
二、scrollIntoView 与 scrollIntoViewIfNeeded API
可以在页面挂载完成mounted的时候做处理，统一对所有的input和textarea做处理
if ((/Android/gi).test(navigator.userAgent)) {
window.addEventListener('resize', function () {
if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
window.setTimeout(function () {
document.activeElement.scrollIntoViewIfNeeded();
}, 0);
}
});
}
或者在input聚焦focus的时候做处理
<template>
<input
v-model="codeValue"
type="text"
placeholder="请输入收到的验证码"
class="verify-input"
maxlength="6"
@focus="changefocus"
@blur.prevent="blur"
>
</template>
<script>
export default {
methods: {
blur(){
if (judgeClient() === 'IOS') {
setTimeout(() => {
const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
window.scrollTo(0, Math.max(scrollHeight - 1, 0));
}, 0);
}
},
changefocus() {
if (this.getPlat() === 'Android') {
setTimeout(() => {
el.target.scrollIntoViewIfNeeded(true);
el.target.scrollIntoView(true);
}, 200);
}
},
getPlat() {
let u = navigator.userAgent;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //判断是否是 android终端
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //判断是否是 iOS终端
if (isAndroid) {
return 'Android';
} else if (isIOS) {
return 'IOS';
} else {
return 'PC';
}
}
}
}
</script>
安卓手机有延迟，有时生效，有时会失效，可能setTimeout设置的延迟事件不够，我设置100的时候还会经常没生效，但是设置200貌似就好很多
