<script>
Let Iosuser = window.navigator.userAgent.indexOf (' IPhone ')
Let INP = Document.queryselector (' #inp ');//input input Box
if (iosuser! =-1) {
var bfscrolltop = document.body.scrolltop;//Gets the height of the soft keyboard to evoke the pre-browser scrolling section
Inp.focus (function () {///here ' input.inputframe ' is the input box for my bottom input field, triggering an event when it gets focus
Interval = setinterval (function () {//Set a timer, the time setting is similar to the time required to eject the soft keyboard
Document.body.scrollTop = document.body.scrollheight;//Gets the focus and assigns all content in the browser height to the browser scroll section height
}, 100)
}). blur (function () {//sets the event when the input box loses focus
Clearinterval (interval);//Clear Timer
Document.body.scrollTop = bfscrolltop;//Re-assigns the browser scroll portion height before the soft keyboard to the changed height
});
} 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)
}
Touch Cancel Blur
function fn (EV) {
var _target = Ev.target | | Ev.srcelement;
if (_target.nodename! = ' INPUT ') {
Inp.blur ();
}
Ev.preventdefault ()
}
}
</script>
Android and iOS keyboard block input content