html – My enter field is positioned on the backside of the web page. When the keyboard pops up, I hope the web page is not going to be pushed up

In an h5 web page, there’s a number of content material, however my enter field must be saved on the backside. Nonetheless, presently in iOS, once I pop up the keyboard to enter, the content material of my web page is pushed up by the keyboard and leaves its authentic place. , once I slide down the web page, my enter field is taken away. I hope that irrespective of how the web page scrolls, my enter field will nonetheless keep on the high of the keyboard.

.f {
place: fastened;
backside: 0;
width: 100%;
peak: 50px;
border-top: 1px #ccc stable;
z-index: 10;
background-color: #fff;
}

<div id="c">
       contents
 </div>
<div class="f">
    <enter  placeholder="please"/>
</div>

let c =  doc.getElementById('c')
  for (let i = 0; i < 100; i++) {
   c.innerHTML += `<p>that is ${i}+++${i}+++ line</>`
  }

That is my easy construction instance. My requirement sounds quite simple, that’s, I need the enter field to stay on the backside, no matter whether or not the keyboard is raised or closed, irrespective of how the web page is scrolled, the web page ought to be fastened no matter whether or not the keyboard is raised or not. .

I’ve tried many strategies, however nonetheless cannot obtain what I would like.
For instance, monitor the place of the scroll bar by popping up the keyboard, and so on.