前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >移动端 input 键盘落下,页面未落下

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

作者头像
super.x
发布2019-11-03 12:42:25
8120
发布2019-11-03 12:42:25
举报

问题描述

代码语言: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加失焦事件,用户输入完数据,直接点击按钮,则失焦事件可能不起作用,所以需要在 提交事件 中增加判断。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档