踩坑：解决移动端点击Input呼出键盘页面被顶起和压缩问题 |
您所在的位置：网站首页 › 移动端输入框聚焦键盘顶起 › 踩坑：解决移动端点击Input呼出键盘页面被顶起和压缩问题 |
踩坑：解决移动端点击Input呼出键盘页面被顶起和压缩问题
|
1. 移动端适配，页面高度没有写死，使用 input 标签时，唤起的虚拟键盘导致页面顶起和压缩
原因：使用的 flex 布局，页面的高度是所有的元素的高度都是自适应的，高度未写死，当出现虚拟键盘时，会造成页面布局混乱，底部元素被顶起及 input 的上一个元素被压缩  before.jpeg
 after.jpeg
解决思路，既然是高度没有写死的造成的，那么将高度写死不就好了么？ 但是高度写死了，还怎么适配不同的手机？不能将高度写死 那么，它只在键盘唤起的那一刻需要高度，那么，我们在唤起键盘的那一刻将下面的元素隐藏掉，当键盘消失时再将元素显示出来 方案一： 使用 v-show 来控制元素的显示与隐藏 click 时 isShow = false, 失去焦点时 isShow = true // 带有 input 元素的 FormItem.vue // 调用 FormItem.vue 的组件 Money.vue isShow = true // 1. 先定义一个变量 isShow，用来控制显示和隐藏 // Layout.vue 组件 .... props:['isShow']效果：是解决了顶起和压缩问题， 引发问题： 但是要点击其它地方使 input 失去焦点，不然就会变成右边的图 且点击其它地方时页面会出现闪烁问题 在这里，会影响其它页面，为了实现这个，我必须在所有用到 Layout.vue 这个组件的地方，给其传一个属性v-show="true"，不然的话，被isShow控制的那个组件就会不显示。总结：这个方案既麻烦又不好用，特别是对于由好多组件组成的页面  1.jpeg
 2.jpeg
方案二： window.onresize 时结合 v-show 来隐藏元素
那不通过判断input的状态，而是通过监听resize事件，当屏幕高度发生变化时，控制元素的隐藏展示
其它的和方案一一样
// Money.vue
height = document.body.clientHeight;
isShow = true
mounted(){
window.addEventListener('resize', ()=>{
if(document.body.clientHeight < height){
this.isShow = false
}else{
this.isShow = true
}
})
}
效果：解决了页面被顶起和压缩的问题 问题： 当虚拟键盘消失时，页面会有闪烁的情况出现 还是和方案一的问题三一样，维护比较麻烦 方案三：一进入页面，就将页面的高度固定下来 一进入页面就获取浏览器可视区的高度，然后把高度赋给根元素 // Money.vue h = document.body.clientHeight;效果： 所有问题完美解决，页面也不会有闪烁问题，特别简单......... 最后附上项目预览地址：项目 simpleBilling |
【本文地址】
今日新闻 |
推荐新闻 |