最近在做移動端開發(fā)，每過一段時間，發(fā)現又出現新的兼容問題咐柜，這次也不例外。
ios手機
之前ios手機是沒有問題的攘残，昨天測試的時候發(fā)現鍵盤彈出不會有遮擋input表單的問題拙友，但是輸入完成，鍵盤收回后發(fā)現歼郭，頁面會有一個空白位置沒有收回
鍵盤收回.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 手機中就沒有這么容易了姊途，測試發(fā)現涉瘾，安卓手機中如果不做任何處理，彈出的鍵盤會遮蓋輸入框捷兰，但是鍵盤彈出后手動滾動頁面立叛，收回鍵盤，在聚焦彈出鍵盤就會定位到上次滾動的地方贡茅。其實這樣也還好秘蛇，但是測試要求想要自動展示到鍵盤上方。所以我需要做些兼容處理
經檢測有幾種解決辦法：
一顶考、修改輸入登錄模塊的定位用fixed赁还、會跟著鍵盤一起動，可以在聚焦失焦給樣式做些處理驹沿，但是會麻煩一些
二艘策、scrollIntoView 與 scrollIntoViewIfNeeded API
可以在頁面掛載完成mounted的時候做處理，統(tǒng)一對所有的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貌似就好很多
