咸鱼呀 咸鱼呀
首页
  • 博客文章

    • node搭建简易cli
    • 一个好看的loading
    • CSS-笔记
    • git提交规范
    • JS工具函数-转载
    • Vue组件打包到发布流程
    • nuxt.js-相关配置信息
    • nvm-upgrade
    • NVM 安装 之 window
    • 正则常用表达式
    • vue 3.0 生命周期函数记录
    • vue 对IE的支持
    • vue入门技术分享
    • 解决ios端inout失焦时,底部白底
    • WebStorm配置本地测试服务器
  • 分类
  • 标签
  • 归档
关于
博客 (opens new window)
GitHub (opens new window)

s-xianyu

前端小白
首页
  • 博客文章

    • node搭建简易cli
    • 一个好看的loading
    • CSS-笔记
    • git提交规范
    • JS工具函数-转载
    • Vue组件打包到发布流程
    • nuxt.js-相关配置信息
    • nvm-upgrade
    • NVM 安装 之 window
    • 正则常用表达式
    • vue 3.0 生命周期函数记录
    • vue 对IE的支持
    • vue入门技术分享
    • 解决ios端inout失焦时,底部白底
    • WebStorm配置本地测试服务器
  • 分类
  • 标签
  • 归档
关于
博客 (opens new window)
GitHub (opens new window)
  • 学习笔记
s-xianyu
2020-07-01

解决ios端inout失焦时,底部白底

经常在ios端遇见键盘弹起后,带起input框上拉,当键盘关闭后,input没有回到原来的位置,这时,ios底部会有键盘收起后的留白。

想要解决这种问题,需要在键盘弹起、关闭时监听,设置scrollTo(top:0, left:0, behavior: 'smooth')

下面是代码↓

mounted() {
  // ios底部留白
      this.iosWhite()
},
methods() {
  iosWhite() {
        const u = navigator.userAgent
        let flag
        let myFunction
        const isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
        if (isIOS) {
          document.body.addEventListener('focusin', () => { // 软键盘弹起事件
            flag = true
            clearTimeout(myFunction)
          })
          document.body.addEventListener('focusout', () => { // 软键盘关闭事件
            flag = false
            if (!flag) {
              myFunction = setTimeout(() => {
                window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })// 重点  =======当键盘收起的时候让页面回到原始位置(这里的top可以根据你们个人的需求改变,并不一定要回到页面顶部)
              }, 200)
            } else {
              return
            }
          })
        } else {
          return
        }
  },
}
编辑 (opens new window)
#前端#H5
上次更新: 3/10/2022, 3:57:03 AM
最近更新
01
开发一个个人的cli
02-26
02
nvm-upgrade
10-11
03
vue 3.0 生命周期函数记录
06-27
更多文章>
Theme by Vdoing | Copyright © 2022-2022 s-xianyu | 小站
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式