When the input box on the html page is clicked, it is obscured by the pop-up input method.

after clicking on the input box in the html page, it is obscured by the pop-up input method

works on scrollIntoView,iOS, but not on Android. The code is as follows

related codes

< style >

  html, body {
    height: 100%;
    padding: 0;
    margin: 0;
  }
  header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    text-align: center;
    background: -sharpccc;
  }
  main {
    position: absolute;
    top: 50px;
    bottom: 10px;
    left: 20px;
    width: 100%;
    margin-bottom: 50px;
    /*  */
    overflow-y: scroll;
    /*  */
    -webkit-overflow-scrolling: touch;
  }
  footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: -sharp666;
    border-top: 1px solid -sharpe6e6e6;
  }
  footer input {
    display: inline-block;
    width: 90%;
    height: 20px;
    font-size: 14px;
    outline: none;
    border: 1px solid -sharpe6e6e6;
    border-radius: 5px;
  }

< / style >
< body >

<header>
  This is the header
</header>
<main>
  <h1><%= title %></h1>
  

Welcome to <%= title %>

<ul> <li>Today</li> <li>is</li> <li>Sunday</li> <li>And</li> <li>I</li> <li>have</li> <li>to</li> <li>go</li> <li>to</li> <li>work</li> <li>tomorrow</li> <li>Today</li> <li>is</li> <li>Sunday</li> <li>And</li> <li>I</li> <li>have</li> <li>to</li> <li>go</li> <li>to</li> <li>work</li> <li>tomorrow</li> </ul> </main> <footer> <input type="text" placeholder="Type here..."> </footer>

< / body >
< script type= "text/javascript" >

$(function() {
  $("input").on("click", function () {
    var target = this;
    // 
    setTimeout(function(){
      target.scrollIntoView(true);
    },100);
  });
})

< / script >

Apr.05,2021

try this, too?

 target.scrollIntoViewIfNeeded()

js processing. When the height change of clientHeight is detected, the height becomes smaller when the pop-up box pops up, and then js makes positioning compensation for the page

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-7c1442-17287.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-7c1442-17287.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?