移动端输入文字时键盘弹起遮挡input解决方案

1.判断机型 (ios/ andriod)
// 判断手机 - ios/andriod
function isIOS() {
const u = navigator.userAgent;
return !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
}

2.针对不同机型调用不同方法
/**
* 调用上面方法判断用户机型
*/
function judgeInput() {
if (isIOS()) {//ios处理逻辑
window.addEventListener('focusin', function () {
console.log('ios===',document.activeElement.tagName);
if (
document.activeElement.tagName === 'INPUT' ||
document.activeElement.tagName === 'TEXTAREA'
) {
setTimeout(function () {
document.documentElement.scrollTop = document.body.scrollHeight;
}, 0);
}
});
} else {//andriod处理逻辑
window.addEventListener('resize', function () {
console.log('andriod===',document.activeElement.tagName);
if (
document.activeElement.tagName === 'INPUT' ||
document.activeElement.tagName === 'TEXTAREA'
) {
setTimeout(function () {
document.activeElement.scrollIntoView();
}, 0);
}
});
}
}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容