移动端 input 键盘落下，页面未落下

问题描述

代码语言：javascript复制

移动端项目，当前页面只有一个输入框，填充内容后，点击提交，键盘落下，页面未落下
后续会有弹框，页面如果未落下，则弹框展示有问题，切点击弹框按钮不起作用

页面布局

页面整体不要设置 height:100%;overflow:hidden; 否则安卓端 点击input，页面不会上顶，也无法滚动，可能会遮挡【兑换】按钮，需要先收起键盘，再点击按钮，影响用户体验~

代码语言：javascript复制

<div class="convert-code-wrapper">
    <header class="cc-header"><span class="ico-cc-back" @click="back"></span>使用兑换码<span></span></header>
    <div class="cc-main">
      <img src="@/XXX/ic-card.png" alt="">
      <input v-model="code" type="text" maxlength="16" @focus="isDown = false" @blur="downKey()" placeholder="请输入XXX兑换码">
      <p :class="{'cc-unchange' : !canChange}" @click="openMsgM">使用兑换码</p>
    </div>
  </div>
  
  // SCSS
  $base-font-size: 37.5px;

  @function px2rem($px) {
    @return ($px / $base-font-size) * 1rem / 2;
  }
.convert-code-wrapper{
    width: 100%;
    background-color: #fff;
    position: relative;
    .cc-header{
      width: calc(100% - #{px2rem(60px)});
      font-size: px2rem(34px);
      color: #000;
      height: px2rem(98px);
      text-align: center;
      line-height: px2rem(98px);
      padding: px2rem(30px) px2rem(30px) 0;
      background-color: #fff;
      position: fixed;
      top: 0;
    }
    .cc-main{
      width: 100%;
      padding-top: px2rem(128px);
      background: url(../../XXX/bg-home.png) no-repeat top #fff;
      background-size: 100% auto;
      overflow: hidden;
      .cc-unchange{
        opacity: .4;
      }
      img, input {
        display: block;
        margin: auto;
      }
      img{
        width: px2rem(696px);
        height: auto;
        margin-top: px2rem(118px);
      }
      input{
        border: none;
        outline: none;
        padding: px2rem(20px) px2rem(50px);
        width: px2rem(420px);
        height: px2rem(50px);
        line-height: px2rem(50px);
        font-size: px2rem(34px);
        font-weight: 300;
        color: #333;
        background: url(../../XXX/bg-btn.png) no-repeat center #fff;
        background-size: 100% 100%;
        border-radius: px2rem(45px);
        overflow: hidden;
      }
      input::-webkit-input-placeholder {
          color: #999;
      }
      :-moz-placeholder {
          color: #999;
      }
      ::-moz-placeholder {
          color: #999;
      }
      :-ms-input-placeholder {
          color: #999;
      }
      p{
        width: px2rem(520px);
        height: px2rem(90px);
        line-height: px2rem(90px);
        text-align: center;
        font-size: px2rem(34px);
        color: #fff;
        background-color: #20a3ff;
        border-radius: px2rem(45px);
        overflow: hidden;
        margin: px2rem(50px) auto;
        &.cc-unchange{
          opacity: .4;
        }
      }
    }
  }

解决方案

第一种 （网上流传的方法，但对我不起作用）

代码语言：javascript复制

$("input").on("blur",function(){
    window.scroll(0,0);//失焦后强制让页面归位
});

第二种 （可以解决）

代码语言：javascript复制

<input v-model="code" type="text" 
@focus="isDown = false" @blur="downKey()" 
placeholder="请输入兑换码">

// data 定义
isDown: true
// 收回键盘
      downKey() {
        let timer = setTimeout(() => {
          clearTimeout(timer)
          document.documentElement.scrollTop = document.body.scrollHeight
          document.body.scrollTop = document.body.scrollHeight
          this.isDown = true
        }, 20)
      }
      
  // 点击兑换
  change() {
        if(!this.isDown) this.downKey()
        // xxxxx
  }     

如果只给input加失焦事件，用户输入完数据，直接点击按钮，则失焦事件可能不起作用，所以需要在 提交事件 中增加判断。

height hidden input overflow 用户体验

0 人点赞