In my webpage, there is a lot of content, and I need my input box to be kept at the bottom. However, with iOS Safari, when I click on the input tag to open the keyboard, the content of my page is pushed up by the keyboard and leaves its original position. When I slide down the page, my input box is taken away. I want my input box to be fixed above the keyboard. Here's my example:
.f {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
border-top: 1px #ccc solid;
z-index: 10;
background-color: #fff;
}
<div id="c">
contents
</div>
<div class="f">
<input placeholder="please"/>
</div>
let c = document.getElementById('c')
for (let i = 0; i < 100; i++) {
c.innerHTML += `<p>this is ${i}+++${i}+++ line</>`
}
I want the input box to remain at the bottom, regardless of whether the keyboard is raised or closed, no matter how the page is scrolled, the page should be fixed regardless of whether the keyboard is raised or not.
I've tried many methods, but still can't achieve what I need. For example, monitor the position of the scroll bar by popping up the keyboard, etc.
Officially, I don't think you can.
For example, this seems like the right page, but it doesn't have anything helpful for you:
There was some discussion of how have the page behave a certain way to trigger Safari to react as desired, by effect.