鍍金池/ 問(wèn)答/HTML5  HTML/ html頁(yè)面中的輸入框點(diǎn)擊后，被彈出的輸入法遮住了。

html頁(yè)面中的輸入框點(diǎn)擊后，被彈出的輸入法遮住了。

html頁(yè)面中的輸入框點(diǎn)擊后，被彈出的輸入法遮住了

使用了scrollIntoView，iOS上可以生效，安卓上沒(méi)作用，代碼如下

相關(guān)代碼

<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: #ccc;
  }
  main {
    position: absolute;
    top: 50px;
    bottom: 10px;
    left: 20px;
    width: 100%;
    margin-bottom: 50px;
    /* 使之可以滾動(dòng) */
    overflow-y: scroll;
    /* 增加該屬性，可以增加彈性，是滑動(dòng)更加順暢 */
    -webkit-overflow-scrolling: touch;
  }
  footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background: #666;
    border-top: 1px solid #e6e6e6;
  }
  footer input {
    display: inline-block;
    width: 90%;
    height: 20px;
    font-size: 14px;
    outline: none;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
  }

</style>
<body>

<header>
  This is the header
</header>
<main>
  <h1><%= title %></h1>
  <p>Welcome to <%= title %></p>
  <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;
    // 使用定時(shí)器是為了讓輸入框上滑時(shí)更加自然
    setTimeout(function(){
      target.scrollIntoView(true);
    },100);
  });
})

</script>

回答
編輯回答
朽鹿

js處理。。檢測(cè)clientHeight高度變化，彈出框彈出的時(shí)候高度會(huì)明顯變小，然后js對(duì)頁(yè)面做定位補(bǔ)償

2018年9月22日 16:40
編輯回答
瘋子范

這個(gè)也加上試試?

 target.scrollIntoViewIfNeeded()
2018年1月23日 19:48