安卓和ios键盘挡住输入内容

Posted flavorhome

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了安卓和ios键盘挡住输入内容相关的知识,希望对你有一定的参考价值。

<script>
let iosUser = window.navigator.userAgent.indexOf(‘iPhone‘)
let inp = document.querySelector(‘#inp‘);//input输入框
if (iosUser != -1) {
var bfscrolltop = document.body.scrollTop;//获取软键盘唤起前浏览器滚动部分的高度
inp.focus(function () {//在这里‘input.inputframe’是我的底部输入栏的输入框,当它获取焦点时触发事件
interval = setInterval(function () {//设置一个计时器,时间设置与软键盘弹出所需时间相近
document.body.scrollTop = document.body.scrollHeight;//获取焦点后将浏览器内所有内容高度赋给浏览器滚动部分高度
}, 100)
}).blur(function () {//设定输入框失去焦点时的事件
clearInterval(interval);//清除计时器
document.body.scrollTop = bfscrolltop;//将软键盘唤起前的浏览器滚动部分高度重新赋给改变后的高度
});
} else {
inp.onclick = function (ev) {
document.querySelector(‘body‘).style.height = ‘999px‘;
inp.style.position = ‘static‘;
setTimeout(function () {
document.body.scrollTop = document.documentElement.scrollTop = inp.getBoundingClientRect().top + pageYOffset - 300;
}, 50);
window.addEventListener(‘touchmove‘, fn, false);
}

inp.onblur = function () {
document.querySelector(‘body‘).style.height = "auto"
document.querySelector(‘body‘).removeAttribute(‘style‘)
window.removeEventListener(‘touchmove‘, fn, false)
}

//触摸取消blur
function fn(ev) {
var _target = ev.target || ev.srcElement;
if (_target.nodeName != ‘INPUT‘) {
inp.blur();
}
ev.preventDefault()
}
}
</script>






































以上是关于安卓和ios键盘挡住输入内容的主要内容,如果未能解决你的问题,请参考以下文章

针对软键盘挡住input输入框的问题

2020-09-18 设置沉浸式状态栏,WebView底部输入框被键盘挡住问题

安卓手机点输入输入框不出来键盘

appium+java 如何隐藏安卓键盘

解决安卓收起键盘无法触发失焦事件的问题

解决移动端输入法挡住输入框的办法