html页面中的输入框点击后,被弹出的输入法遮住了。

html页面中的输入框点击后,被弹出的输入法遮住了

使用了scrollIntoView,iOS上可以生效,安卓上没作用,代码如下

相关代码

<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;
    /* 使之可以滚动 */
    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: #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;
    // 使用定时器是为了让输入框上滑时更加自然
    setTimeout(function(){
      target.scrollIntoView(true);
    },100);
  });
})

</script>

阅读 2.8k
2 个回答

这个也加上试试?

 target.scrollIntoViewIfNeeded()

js处理。。检测clientHeight高度变化,弹出框弹出的时候高度会明显变小,然后js对页面做定位补偿

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题