移动端页面键盘弹出后导致body高度变低背景图片被挤上去解决方法

最新推荐文章于 2024-01-04 21:46:09 发布
原创 最新推荐文章于 2024-01-04 21:46:09 发布 · 308 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

文章描述了在Vue组件中设置背景图片时如何解决键盘弹出导致的页面布局问题，通过调整`main`元素的高度保持在100%，确保背景图片不会被键盘遮挡。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

本身在设置背景图片的时候是将html,body的高度设为100%，然后

原来的代码最外层直接设置百分之百：

<template>
  <div class="back">
    <div style="padding-top: 5%;padding-bottom: 5%; height: 100%">
      <div class="box-card bar-margin bar-card">
        <el-form
          v-if="loginState === 0"
          ref="ruleForm"
          :label-position="labelPosition"
          :model="ruleForm"
          :rules="rules"
          style="margin-top: 68%"
        >
          <el-row style="padding-left: 25px">
            <el-col :span="20">
              <el-form-item label="身份证号" prop="idCard" label-width="80px">
                <el-input v-model="ruleForm.idCard" size="small" maxlength="18" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row style="padding-left: 25px">
            <el-col :span="20">
              <el-form-item label="密码" prop="password" label-width="80px">
                <el-input v-model="ruleForm.password" auto-complete="off" size="small" maxlength="18" type="password" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row style="padding-left: 50%">
            <el-col :span="20">
              <el-checkbox v-model="checked" style="color:#a0a0a0;margin:0 0 20px 0">记住密码</el-checkbox>
            </el-col>
          </el-row>

          <el-row style="padding-top: 0px">
            <el-col :span="24">
              <el-button
                round
                style="width: 180px"
                size="default"
                type="primary"
                :loading="logining"
                class="button-login"
                @click="submitForm('ruleForm')"
              >登录
              </el-button>
            </el-col>
          </el-row>
          <el-row style="padding-top: 20px">
            <el-col :span="24" style="padding-top: 10px;text-align: center;">
              <el-link style="color: #e4b9b9" @click="clickState(2)"><span>重置密码</span></el-link>
              |
              <el-link style="color: #e4b9b9" @click="clickState(1)"><span>注册</span></el-link>
            </el-col>
          </el-row>
        </el-form>
        <Register v-if="loginState === 1" @clickState="clickState" />
        <Retrieve v-if="loginState === 2" @clickState="clickState" />
      </div>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/app/login/index'
import { idCardNoVerify } from '@/utils/my-validate'
import CryptoJS from 'crypto-js'

export default {
  components: {
    Register: () => import('./register.vue'),
    Retrieve: () => import('./retrieve.vue')
  },
  data() {
    // 身份证号码校验
    const checkIDCard = (rule, value, callback) => {
      if (!idCardNoVerify(value)) callback(new Error('请输入正确的身份证号码'))
      callback()
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPassword !== '') {
          this.$refs.ruleForm.validateField('checkPassword')
        }
        callback()
      }
    }
    return {
      logining: false,
      checked: true,
      labelPosition: 'right',
      loginState: 0, // 0登录页面 1 注册页面 2重置密码
      activeName: 'first',
      key: 'secret key 5452',
      ruleForm: {
        idCard: '',
        password: ''
      },
      rules: {
        idCard: [{
          required: true,
          message: '请输入身份证号',
          trigger: 'blur'
        }, {
          validator: checkIDCard,
          trigger: 'blur'
        }],
        password: [{
          required: true,
          validator: validatePass,
          trigger: 'blur'
        }]
      }
    }
  },
  mounted() {
    this.account()
  },

  methods: {
    clickState(value) {
      this.loginState = value
    },
    account() {
      this.getCookie()
    },
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.logining = true
          if (this.checked === true) {
            // 存入cookie
            this.setCookie(this.ruleForm.idCard, this.ruleForm.password, 7) // 保存1天
          } else {
            this.clearCookie()
          }
          this.login()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 登录成功存储信息到store
    async login() {
      const res = await login({
        idCard: this.ruleForm.idCard,
        password: this.ruleForm.password
      })
      if (res.code === '200') {
        if (res.data.success) {
          const exdate = new Date()
          exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * 1)
          window.document.cookie =
              'App-Token' + '=' + res.data.token + ';path=/;expires=' + exdate.toGMTString()
          const text = CryptoJS.AES.encrypt(res.data.basicId, this.key)
          window.document.cookie =
              'basicId' + '=' + text + ';path=/;expires=' + exdate.toGMTString()
          // this.$message({
          //   type: 'success',
          //   message: '登录成功'
          // })
          this.$router.push('/App-view/home')
        }
      } else {
        this.logining = false
      }
    },

    setCookie(c_idCard, c_pwd, exdays) {
      const text = CryptoJS.AES.encrypt(c_pwd, this.key)
      const exdate = new Date()
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays)
      // 字符串拼接cookie
      window.document.cookie =
          'idCard' + '=' + c_idCard + ';path=/;expires=' + exdate.toGMTString()
      window.document.cookie =
          'userPwd' + '=' + text + ';path=/;expires=' + exdate.toGMTString()
    },
    getCookie: function () {
      if (document.cookie.length > 0) {
        const arr = document.cookie.split('; ')
        for (let i = 0; i < arr.length; i++) {
          const arr2 = arr[i].split('=')
          if (arr2[0] === 'idCard') {
            this.ruleForm.idCard = arr2[1]
          } else if (arr2[0] === 'userPwd') {
            const bytes = CryptoJS.AES.decrypt(arr2[1].toString(), this.key)
            const plaintext = bytes.toString(CryptoJS.enc.Utf8)
            this.ruleForm.password = plaintext
          }
        }
      }
    },
    // 清除cookie
    clearCookie: function () {
      this.setCookie('', '', -1)
    }

  }
}
</script>

<style lang="scss">
  .back {
    background: url('/img/bottom.png');
    background-size: 100% 100%;
    margin: 0 auto;
    text-align: center;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .bar-card {
    margin: 0 auto;
    text-align: center;
    width: calc(100% - 40px);
  }

  .login-ruleForm {
    margin: 0 auto;
    text-align: center;
  }

  .van-dropdown-menu__bar {
    background-color: #eef3f3c7;
  }
</style>

现在的代码：

<template>
  <div class="backTemp" :style="{ height: bodyHeight + 'px' }">
    <div style="padding-top: 5%;padding-bottom: 5%; height: 100%">
      <div class="box-card bar-margin bar-card">
        <el-form
          v-if="loginState === 0"
          ref="ruleForm"
          :label-position="labelPosition"
          :model="ruleForm"
          :rules="rules"
          style="margin-top: 68%"
        >
          <el-row style="padding-left: 25px">
            <el-col :span="20">
              <el-form-item label="身份证号" prop="idCard" label-width="80px">
                <el-input v-model="ruleForm.idCard" size="small" maxlength="18" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row style="padding-left: 25px">
            <el-col :span="20">
              <el-form-item label="密码" prop="password" label-width="80px">
                <el-input v-model="ruleForm.password" auto-complete="off" size="small" maxlength="18" type="password" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row style="padding-left: 50%">
            <el-col :span="20">
              <el-checkbox v-model="checked" style="color:#a0a0a0;margin:0 0 20px 0">记住密码</el-checkbox>
            </el-col>
          </el-row>

          <el-row style="padding-top: 0px">
            <el-col :span="24">
              <el-button
                round
                style="width: 180px"
                size="default"
                type="primary"
                :loading="logining"
                class="button-login"
                @click="submitForm('ruleForm')"
              >登录
              </el-button>
            </el-col>
          </el-row>
          <el-row style="padding-top: 20px">
            <el-col :span="24" style="padding-top: 10px;text-align: center;">
              <el-link style="color: #e4b9b9" @click="clickState(2)"><span>重置密码</span></el-link>
              |
              <el-link style="color: #e4b9b9" @click="clickState(1)"><span>注册</span></el-link>
            </el-col>
          </el-row>
        </el-form>
        <Register v-if="loginState === 1" @clickState="clickState" />
        <Retrieve v-if="loginState === 2" @clickState="clickState" />
      </div>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/app/login/index'
import { idCardNoVerify } from '@/utils/my-validate'
import CryptoJS from 'crypto-js'

export default {
  components: {
    Register: () => import('./register.vue'),
    Retrieve: () => import('./retrieve.vue')
  },
  data() {
    // 身份证号码校验
    const checkIDCard = (rule, value, callback) => {
      if (!idCardNoVerify(value)) callback(new Error('请输入正确的身份证号码'))
      callback()
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPassword !== '') {
          this.$refs.ruleForm.validateField('checkPassword')
        }
        callback()
      }
    }
    return {
      bodyHeight: this.bodyHeight,
      logining: false,
      checked: true,
      labelPosition: 'right',
      loginState: 0, // 0登录页面 1 注册页面 2重置密码
      activeName: 'first',
      key: 'secret key 5452',
      ruleForm: {
        idCard: '',
        password: ''
      },
      rules: {
        idCard: [{
          required: true,
          message: '请输入身份证号',
          trigger: 'blur'
        }, {
          validator: checkIDCard,
          trigger: 'blur'
        }],
        password: [{
          required: true,
          validator: validatePass,
          trigger: 'blur'
        }]
      }
    }
  },
  mounted() {
    this.bodyHeight = document.documentElement.clientHeight
    this.account()
  },

  methods: {
    clickState(value) {
      this.loginState = value
    },
    account() {
      this.getCookie()
    },
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.logining = true
          if (this.checked === true) {
            // 存入cookie
            this.setCookie(this.ruleForm.idCard, this.ruleForm.password, 7) // 保存1天
          } else {
            this.clearCookie()
          }
          this.login()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 登录成功存储信息到store
    async login() {
      const res = await login({
        idCard: this.ruleForm.idCard,
        password: this.ruleForm.password
      })
      if (res.code === '200') {
        if (res.data.success) {
          const exdate = new Date()
          exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * 1)
          window.document.cookie =
              'App-Token' + '=' + res.data.token + ';path=/;expires=' + exdate.toGMTString()
          const text = CryptoJS.AES.encrypt(res.data.basicId, this.key)
          window.document.cookie =
              'basicId' + '=' + text + ';path=/;expires=' + exdate.toGMTString()
          // this.$message({
          //   type: 'success',
          //   message: '登录成功'
          // })
          this.$router.push('/App-view/home')
        }
      } else {
        this.logining = false
      }
    },

    setCookie(c_idCard, c_pwd, exdays) {
      const text = CryptoJS.AES.encrypt(c_pwd, this.key)
      const exdate = new Date()
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays)
      // 字符串拼接cookie
      window.document.cookie =
          'idCard' + '=' + c_idCard + ';path=/;expires=' + exdate.toGMTString()
      window.document.cookie =
          'userPwd' + '=' + text + ';path=/;expires=' + exdate.toGMTString()
    },
    getCookie: function () {
      if (document.cookie.length > 0) {
        const arr = document.cookie.split('; ')
        for (let i = 0; i < arr.length; i++) {
          const arr2 = arr[i].split('=')
          if (arr2[0] === 'idCard') {
            this.ruleForm.idCard = arr2[1]
          } else if (arr2[0] === 'userPwd') {
            const bytes = CryptoJS.AES.decrypt(arr2[1].toString(), this.key)
            const plaintext = bytes.toString(CryptoJS.enc.Utf8)
            this.ruleForm.password = plaintext
          }
        }
      }
    },
    // 清除cookie
    clearCookie: function () {
      this.setCookie('', '', -1)
    }

  }
}
</script>

<style lang="scss">
  .backTemp {
    background: url('/img/bottom.png');
    background-size: 100% 100%;
    margin: 0 auto;
    text-align: center;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .bar-card {
    margin: 0 auto;
    text-align: center;
    width: calc(100% - 40px);
  }

  .login-ruleForm {
    margin: 0 auto;
    text-align: center;
  }

  .van-dropdown-menu__bar {
    background-color: #eef3f3c7;
  }
</style>

但是这样写就会导致键盘弹出的时候html和body的高度从原来的100%变为（100%-键盘高度），这样的话main的height:100%也会变成（100%-键盘高度），所以需要强行将main的高度设置为html原本的100%。

<div class="main" :style="{ height: bodyHeight + 'px' }">
</div>


mounted(){
 this.bodyHeight=document.documentElement.clientHeight
}

这样的话即使键盘弹起也只会改变html和body的高度，main的高度还是之前的100%，背景图片也就不会被挤上去了

防抖与节流：前端性能优化核心技巧新手入门指南|防抖与节流完全指南：从概念到实战记忆技巧|新手必会的性能优化技巧，轻松区分与记忆方法|一文搞懂前端防抖与节流：告别傻傻分不清！
南北极之间
04-22 366
考虑因素选择防抖选择节流响应顺序需要最后一次操作需要均匀间隔的响应执行频率不关心执行次数需要控制最低执行频率连续性需求不连续（如保存）需要连续性（如动画）防抖（Debounce），其实就是“抖动防止器”。它的核心思想是在事件被频繁触发时，只在事件停止触发一段时间后，才执行对应的回调函数。通俗理解：假如你在打字，防抖就是等待你停止打字一段时间（比如500ms），如果在这段时间内你又开始打字，计时会重新开始，直到连续一段时间没有输入，才执行搜索请求等操作。节流（Throttle）
【Python】高效的Web自动化测试利器—Python+Playwright快速上手自动化实战指南
最新发布
墩墩分墩
08-16 6742
**Playwright是微软在` 2020 年初 `开源自动化测试工具，功能和 selenium 类似，都可以驱动浏览器进行各种自动化操作。** - 支持主流浏览器，如Chrome、Firefox、Safari 等，同时支持以**无头模式、有头模式**运行，并提供了**同步、异步的 API**，可以结合 `主流测试框架`使用，并且支持浏览器端的自动化脚本录制等功能。 **特点：** - 跨浏览器：Playwright 支持所有现代渲染引擎，包括Chromium、WebKit 和 Firefox； - 跨
vue3+vant4 移动端软键盘弹出 收起导致项目样式布局错乱解决方案，亲测有效！！
枫ゞ的博客
01-04 3439
最近在做vue3 H5的移动端项目 我用的是vue3+vant4，然后在使用过程中发现 小米14手机在点击输入框软键盘弹出 时会导致项目布局整体向上移动 导致页面布局错乱。
解决移动端input输入，导致满屏背景图片压缩变形的问题
拿回忆下酒
03-20 594
input输入框 软键盘会将页面顶起，导致背景图出现压缩、变形等情况
解决body,html高度设置为100%时,安卓手机弹起键盘时，其高度变为可见高度的问题
前端小白菜
02-06 5017
最近在微信前端页面开发过程中遇到一个问题，当把body,html高度设置为100%时,在安卓手机弹起键盘的时候，其高度变为可见高度，影响页面的显示，解决方法如下： var screenHeight; if (window.innerHeight){ screenHeight = window.innerHeight; } else if ((document.
手机软键盘弹出时影响布局的解决方法
08-31
总的来说，解决手机软键盘弹出影响布局的方法主要包括动态设置页面高度、调整输入框的位置或大小，以及尽可能使用广泛支持的CSS属性和单位。在实际开发中，还需要根据目标用户群体的设备和浏览器特性进行测试和优化...
android软键盘遮挡WebView中input的解决方案
热门推荐
李泽的专栏
08-22 1万+
现象在做hybrid应用时，我们用WebView来加载html页面，经常会出现软件盘弹出，遮挡了html中输入控件（如input）的问题。 无论你是用系统的原生WebView（从4.0-7.0），还是Crosswalk的XWalkView，都有这个问题！ （用系统原生浏览器是没有这个问题的） 这里不得不吐槽一下，ios没有这个问题。解决方案有以下几种： 软键盘弹出时WebView高度缩小。 软键
移动端兼容性问题集
maggie_live的博客
08-12 1008
1.input获取焦点时，页面被放大 // ios全屏 <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0...
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
12-10
在用vue-cli脚手架搭建手机H5页面应用的时候，其中一页中部有input，底部有position：absolute；bottom：0的元素， 当点击input框时在安卓手机上出现了： 1 虚拟键盘弹出盖住input 2 底部定位的元素被挤上来 网络上很多关于body设定宽高以及scrolltop的方法都不管用，因为这里是路由页面，根据网上的思路，吊起输入键盘的时候页面的高度是变化的，监听[removed]，判断是否吊起键盘，然后设定底部模块的隐藏和显示，整个块元素的margintop就可以实现了。 代码如下 mounted () { this.clientHeight =
layui弹出层样式修改，使用css的background属性设置多个背景图附件
02-24
切图附件
vue项目，h5登录页面,手机上键盘弹起把背景图也顶起来了。解决办法
qq_36165747的博客
12-20 5661
.user-container{  position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; background: url("../../static/imgs/bgi.png") no-repeat; background-size:cover; } .form { position: relative...
vue键盘抬起_vue移动端--键盘弹起（隐藏底部按钮）
weixin_36278817的博客
12-24 1648
基本思路是通过监听屏幕的高度来改变底部的显示/隐藏首先：在data中获取屏幕的默认以及实时高度---->data() {return {isShow:true,//按照标准隐藏domHeight: document.documentElement.clientHeight, //默认屏幕高度showHeight: document.documentElement.clientHeight,...
手机端输入键盘弹起背景图偏移，底部有空白
weixin_30732487的博客
10-24 425
1.简单解决方法，整个页面容器设置overflow: hidden; 此时背景图仍然会偏移，但底部空白消失。 2.监听focus，让div滚动，重新布局计算高度。比较麻烦 转载于:https://www.cnblogs.com/lyxverycool/articles/7723227.html...
vue项目之解决键盘弹起问题
qq_38401285的博客
12-24 6203
在用vue做移动端项目时，当有输入框时，手机自带的键盘会把原本定位在底部的内容顶起。可以通过watch document.body.clientHeight的变化进行显示或隐藏定位在底部的内容。当document.body.clientHeight变小时，隐藏即可。 for example: data () {   return {    documentHeight:document.b...
vue的最外层body宽度不能填满浏览器页面
qq_55861339的博客
09-30 757
中，设置width和height为100%，对margin进行重写去掉边距。vue默认为body设置了。可以在App.vue。
解决移动端软键盘压缩页面布局的问题
yakelande的博客
08-16 3293
今天在做移动端的时候遇到，页面使用绝对定位或百分比，vh、vh来布局时软键盘压缩页面的问题，百度了几个方法，特此记录一下。套壳上架的话可以禁用横屏，避免视口改变触发事件 1.判断window.onresize前后大小，间接判断软键盘弹出，在对页面布局做处理，如改变position或设置容易大小为定值 var clientHeight = document.documentElement.cli...
解决移动端软键盘弹起底部固定布局被顶上去问题和屏幕背景被压缩问题
刘运召的博客
10-18 7915
在前端页面布局中经常会把一些按钮通过fixed或absolute固定到底部，但如果页面上有input或textarea被点击获取焦点时，在移动端上软键盘弹起时就会把这些固定到底部的布局顶上去，有时会十分影响美观，下面是在Vue项目中如何通过隐藏的方式实现不被顶上去的
C# 背景变灰并屏蔽技术实现方法
在C#编程中，实现弹出窗口后背景变灰并屏蔽的效果，通常涉及到以下几个关键知识点：模态对话框、层叠样式表(CSS)、DOM操作以及可能的JavaScript代码交互。以下是对这些知识点的详细解释和代码实现方法。 ### 模态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值