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 >