移动端页面键盘顶出页面异常

移动端在有时候唤起键盘后页面会被顶上去如何解决

实现原理是去在页面底部建立个小的隐藏的div当软键盘收起的时候页面长度变更实现解决页面整体被顶的问题

在需要解决此问题的input上加入聚焦失焦函数触发

页面底部加入div

<div class='page_footer'> </div>

这是vue里的methods

methods: {
      onFocus (key) {
        var ele = document.getElementsByClassName('page_footer')[0]
        ele.style.position = 'static'
        ele.style.marginTop = '4.68rem'
        ele.style.width = '100%'
      },
      onBlur () {
        var ele = document.getElementsByClassName('page_footer')[0]
        ele.style.position = 'fixed'
        ele.style.bottom = '0.88rem'
        ele.style.width = 'calc(100% - 0.8rem)'
      }
}

.page_footer {
      position: fixed;
      bottom: 0.88rem;
      width: calc(100% - 0.8rem);
      right: 0.4rem;
      left: 0.4rem;
      box-sizing: border-box;
}

赏

×

写着玩做笔记

小编不易来个几毛也是钱

打开支付宝扫一扫，即可进行扫码打赏哦