解决IOS安卓虚拟键盘挡住input问题

在做微信移动端IM的时候 ios和安卓会遇到input被键盘挡住的问题挺影响用户体验的
解决思路使用scrollIntoView 方法:scrollIntoView()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素，
调用元素就可以出现在视窗中。如果给该方法传入true作为参数，或者不传入任何参数，那么
窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数，调用元素
会尽可能全部出现在视口中（可能的话，调用元素的底部会与视口的顶部齐平。）不过顶部
不一定齐平

ios:

安卓：

代码：

<template>
  <div>
     <header>
      This is the header
    </header>
    <main>
      <h1>title</h1>
      <p>Welcome to</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>
      </ul>
    </main>
    <footer id="sendText">
      <input type="text" id="textInput"  v-on:focus="txtFocus" placeholder="Type here...">
    </footer>
  </div>
</template>
<script type="text/javascript">
  export default {
    data(){
      return{
        textInput:null,
        sendText:null
      }
    },
    created: function() {

    },
    methods:{
      txtFocus(){
            setTimeout(() => {
              this.sendText.scrollIntoView(true);
              this.sendText.scrollIntoViewIfNeeded();
            }, 300)
            if(this.$store.state.browser.versions.ios){ //判断IOS设备
              var ver = u.match(/OS (\d+)_(\d+)_?(\d+)?/);  
              ver = parseInt(ver[1], 10);  
              if(ver!=11){ //ios11 不需要做任何的处理
                  setTimeout(() => {
                      document.body.scrollTop = 9999
                  }, 600)
              } 

            }
        },
        txtBlur(){
          this.textInput.blur()
        },
     },
     mounted() {
        this.textInput = document.getElementById("textInput")
        this.sendText = document.getElementById("sendText")
        window.addEventListener('touchstart', this.txtBlur)
    },
  }
</script>
<style lang='less'>
  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>

注：安卓使用H5的scrollIntoView是没啥问题的，不会挡住输入法。
IOS会有概率挡住所以开个定时器滑动一下可以完全避免输入法挡住input。
然后通过监听用户的触摸事件取消input的焦点,理由是防止用户滑动页面的时候输入法再次挡住input输入法。
如有更好的解决办法可在下方留言一起探讨

解决IOS安卓虚拟键盘挡住input问题

猜你喜欢