踩坑：解决移动端点击Input呼出键盘页面被顶起和压缩问题

1. 移动端适配，页面高度没有写死，使用 input 标签时，唤起的虚拟键盘导致页面顶起和压缩

• 原因：使用的 flex 布局，页面的高度是所有的元素的高度都是自适应的，高度未写死，当出现虚拟键盘时，会造成页面布局混乱，底部元素被顶起及 input 的上一个元素被压缩

  
  before.jpeg after.jpeg

• 解决思路，既然是高度没有写死的造成的，那么将高度写死不就好了么？

• 但是高度写死了，还怎么适配不同的手机？不能将高度写死

• 那么，它只在键盘唤起的那一刻需要高度，那么，我们在唤起键盘的那一刻将下面的元素隐藏掉，当键盘消失时再将元素显示出来

方案一： 使用 v-show 来控制元素的显示与隐藏

• click 时 isShow = false, 失去焦点时 isShow = true

// 带有 input 元素的 FormItem.vue
<input type="text"
       class="input-notes"
       :value="value"
       @input="onValueChange($event.target.value)"
       :placeholder="placeholder"
       @click="$emit('update:isShow',false)"
       @blur="$emit('update:isShow',true)"
       >


// 调用 FormItem.vue 的组件 Money.vue
<Layout class-prefix="xxx" ref="layout"  :is-show="isShow"> <--! 因为把底部组件放 Layout组件里，要给其传一个值-->  
  <NumberPad  v-show="isShow"/>  <--! 2. 控制要隐藏的变量 -->
  <FormItem  @update:isShow="(value) => {isShow=value}"/> <--! 3. 当触发input的click事件时，改变isShow的值 -->
  <Tags :data-source.sync="tagsList" @update:selectedTag="selectedTag"/>
</Layout>   


isShow = true // 1. 先定义一个变量 isShow，用来控制显示和隐藏
  
// Layout.vue 组件
 <div class="layout-wrapper">
    ....
    <Nav v-show="isShow"/>
  </div>
  
  props:['isShow']

效果：是解决了顶起和压缩问题，
引发问题：

1. 但是要点击其它地方使 input 失去焦点，不然就会变成右边的图
2. 且点击其它地方时页面会出现闪烁问题
3. 在这里，会影响其它页面，为了实现这个，我必须在所有用到 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
            }
    })
}

效果：解决了页面被顶起和压缩的问题
问题：

1. 当虚拟键盘消失时，页面会有闪烁的情况出现
2. 还是和方案一的问题三一样，维护比较麻烦

方案三：一进入页面，就将页面的高度固定下来

• 一进入页面就获取浏览器可视区的高度，然后把高度赋给根元素

 // Money.vue
<Layout class-prefix="xxx" ref="layout" :style="{height:h+'px'}">
    <NumberPad @update:value="onUpdateAmount" @submit="saveRecord" :x="record.tags"/>
    <FormItem :value.sync="record.notes" name="备注" placeholder="请在这里输入备注"/>
    <Tags :data-source.sync="tagsList" @update:selectedTag="selectedTag"/>
    <template #head>
      <Tabs :value.sync="record.type"/>
    </template>
  </Layout>

    h = document.body.clientHeight; 

效果： 所有问题完美解决，页面也不会有闪烁问题，特别简单.........

最后附上项目预览地址：项目 simpleBilling