I.はじめに:
混合開発で発生する問題があります。Android および iOS モデルの一部のモデルでは、入力ボックスがキーボードを起動した後、入力ボックスがキーボードによってブロックされ、漏れ出すために手動でスライドする必要があり、ユーザー体験。
第二に、解決策は次のとおりです。
1. iOS と Android スマートフォンで呼び出される Windows イベントは異なるため、別々に処理する必要があります
2.document.body.scrollTop は無効なので、document.documentElement.scrollTop で置き換えることができます
3 つ目は、具体的な実装プロセスです。
// 判断手机 - ios/andriod
function isIOS() {
const u = navigator.userAgent;
return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
}
/**
* @description: 键盘弹起,输入框被遮挡
*/
function judgeInput() {
if (isIOS()) {
window.addEventListener('focusin', function () {
console.log(1+document.activeElement.tagName);
if (
document.activeElement.tagName === 'INPUT' ||
document.activeElement.tagName === 'TEXTAREA'
) {
setTimeout(function () {
document.documentElement.scrollTop = document.body.scrollHeight;
}, 0);
}
});
} else {
window.addEventListener('resize', function () {
console.log(2+ document.activeElement.tagName);
if (
document.activeElement.tagName === 'INPUT' ||
document.activeElement.tagName === 'TEXTAREA'
) {
setTimeout(function () {
document.activeElement.scrollIntoView();
}, 0);
}
});
}
}
export {
isIOS,
judgeInput
}
カランカラン、これで完了です。使用するときは、judgeInput() を直接呼び出すだけです。