vue 手机键盘把底部按钮顶上去

jiekechoo 发布于2019-08-22 16:05 / 1071人阅读

摘要：背景在写提交订单页面时候，底部按钮当我点击输入留言信息的时候，底部提交订单按钮被输入法软键盘顶上去遮挡住了。原来的样式主要是当输入法点击出现时候修改为绑定动态，，通过来显示动态显示，初始值设置另外设置初始屏幕高度变化屏幕高度。

背景：在写提交订单页面时候，底部按钮当我点击输入留言信息的时候，
底部提交订单按钮被输入法软键盘顶上去遮挡住了。

实现原理：当页面高度发生变化的时候改变底部button的样式，没点击前button在底部固定
position: fixed;当我点击input的时候样式变成position: static!important;

一开始的解决方案是通过input的聚焦和失焦，但是有个问题，当我点击input的时候聚焦，
再点击键盘上的隐藏按钮时就没办法恢复原来的fixed。

原来的样式主要是position: fixed;当输入法点击出现时候修改为 position: static!important;

 .payOnline {
         position: fixed;
         bottom: 0;
         left: 0;
         right: 0;
         width: 100%;
         background: #fff;
         font-size: 17px;    
      }
       .nav-hide {
         position: static!important;
      }

vue绑定动态class，‘nav-hide’ ，通过hideClass来显示动态显示，
初始值设置hideClass: false,
另外设置初始屏幕高度 docmHeight,变化屏幕高度 showHeight 。

//其他代码
  
        合计：¥{{totalFee}}
        提交订单
   
//其他代码

watch 监听showHeight，当页面高度发生变化时候，触发inputType方法,
window.onresize 事件在 vue mounted 的时候去挂载一下它的方法,
以便页面高度发生变化时候更新showHeight

data(){
    retrun{
         // 默认屏幕高度
        docmHeight: document.documentElement.clientHeight,  //一开始的屏幕高度
        showHeight: document.documentElement.clientHeight,   //一开始的屏幕高度
        hideClass: false,
    }
},
 
watch:{
  showHeight: "inputType"  
}
methods: {
     // 检测屏幕高度变化
     inputType() {
        if (!this.timer) {
           this.timer = true
           let that = this
           setTimeout(() => {
              if (that.docmHeight > that.showHeight) {
              //显示class
                 this.hideClass = true;
              } else if (that.docmHeight <= that.showHeight) {
               //显示隐藏
                 this.hideClass = false;
              }
              that.timer = false;
           }, 20)
        }
     },
},
 mounted() {
         // window.onresize监听页面高度的变化
         window.onresize = () => {
            return (() => {
               window.screenHeight = document.body.clientHeight;
               this.showHeight = window.screenHeight;
            })()
         }
      }

方法二

另外还有一种解决方案就是不要将按钮固定到底部，简单粗暴适合对ui要求不高的前端页面，例如原来我的保存地址按钮是固定在底部的，出现上面的问题后我把样式修改了一下，取消fixed定位，加了margin，也解决了这个问题;

保存并使用

.address-from  {
    bottom: .2rem;
    width: 70%;
    text-align: center;
    padding: 10px 0;
    background: #f23030;
    font-size: 16px;
    color: #fff;
    margin: 1.5rem;
    border-radius: 2px;
}

如果大家有更好的方法希望能够交流学习

微信6.7.4 IOS12 手机键盘收缩后白屏问题

加directive

Vue.directive("resetPage", {
  inserted: function(el) {
    // 监听键盘收起事件
    document.body.addEventListener("focusout", () => {
      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        // 软键盘收起的事件处理
        setTimeout(() => {
          const scrollHeight =
            document.documentElement.scrollTop || document.body.scrollTop || 0
          window.scrollTo(0, Math.max(scrollHeight - 1, 0))
        }, 100)
      }
    })
  }
})

input添加 v-reset-page

云服务器 GPU云服务器顶上去底部按钮服务器底部按钮是什么手机底部js特效

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94041.html

第八集: 从零开始实现一套pc端vue的ui组件库(input, textarea组件)

摘要：第八集从零开始实现输入框组件本集定位组件是交互的一大利器他与用户的交流最为密切所以奠定了他在组件界的重要地位也算是一种如果可以的话本集也会一起说完毕竟是一个类型的一起学完收获会很大古人云组件不封输入框，一到面试就发慌一简介大家如果对这个第八集: 从零开始实现(输入框input,textarea组件) 本集定位: input组件是交互的一大利器, 他与用户的交流最为密切, 所以奠...

binaryTree 2019-08-30 15:44 评论0 收藏0
第八集: 从零开始实现一套pc端vue的ui组件库(input, textarea组件)

摘要：第八集从零开始实现输入框组件本集定位组件是交互的一大利器他与用户的交流最为密切所以奠定了他在组件界的重要地位也算是一种如果可以的话本集也会一起说完毕竟是一个类型的一起学完收获会很大古人云组件不封输入框，一到面试就发慌一简介大家如果对这个第八集: 从零开始实现(输入框input,textarea组件) 本集定位: input组件是交互的一大利器, 他与用户的交流最为密切, 所以奠...

chanthuang 2019-08-26 10:33 评论0 收藏0
手机软键盘弹起导致页面变形的一种解决方案

摘要：最近用一种第三方开发框架开发，其中一个页面有十几个输入框，在点击输入时，软键盘弹起，导致页面往上顶，底部的按钮也全部弹到页面上面去了，布局全被打乱。等输入完，软键盘收起时，页面恢复原状。最近用 uniapp（一种第三方 app 开发框架）开发 app，其中一个页面有十几个 input 输入框，在点击 input 输入时，软键盘弹起，导致页面往上顶，底部的按钮也全部弹到页面上面去了，...

X_AirDu 2019-08-23 17:05 评论0 收藏0
移动端页面小bug

摘要：滑动时页面警告解决方法不支持的解决办法姓名身份证号码重点在于给设置高度和伪元素微信去掉底部返回横条问题框自动填充内容背景颜色为黄色设置文字不居中设置间距和等值即可滑动时页面警告 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as pas...

winterdawn 2019-08-02 16:11 评论0 收藏0
移动端页面小bug

摘要：滑动时页面警告解决方法不支持的解决办法姓名身份证号码重点在于给设置高度和伪元素微信去掉底部返回横条问题框自动填充内容背景颜色为黄色设置文字不居中设置间距和等值即可滑动时页面警告 [Intervention] Unable to preventDefault inside passive event listener due to target being treated as pas...

youkede 2019-08-30 15:43 评论0 收藏0