首页 前端知识 js处理IOS虚拟键盘弹出后输入框被遮住

js处理IOS虚拟键盘弹出后输入框被遮住

2024-07-29 00:07:19 前端知识 前端哥 870 479 我要收藏


JS IOS

前言

在项目开发的过程中,在IOS手机端系统下,当对输入框(input/textarea)进行focus操作时,键盘弹起遮住输入框。

问题描述

  1. 从页面底部focus输入框失败
  2. 从页面中间focus输入框失败

原因

造成上述问题的:键盘弹起事件和输入框滚动到浏览器窗口的可见区域的事件有冲突。

解决步骤

根据不同的情况有不同的解决办法:

  1. 从页面底部focus输入框失败:
    使用scrollIntoView方法:该scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。
setTimeout(() => {
    document.activeElement.scrollIntoView()
}, 200)

注意:这里需要使用settimeout去异步请求

  1. 从页面中间focus输入框失败:
let screenHeight = window.innerHeight;
 let keyboardHeight = 0
 let time = 0;
 // 获取键盘高度
 let interval  = setInterval(() => {
    if (screenHeight !== window.innerHeight) {                
          keyboardHeight = screenHeight-window.innerHeight;
          clearInterval(interval)
       }
  }, 50);

// 将输入框复原到原位
let timer = setInterval(() => {
  time++;
  if(time <=5) {
     if(keyboardHeight) {
        document.documentElement.scrollTop = keyboardHeight + 110
      }
   } else {
     clearInterval(timer)
   }
 }, 50);

后言

希望本文会对你有所帮助,如果有什么问题,可在下方留言沟通

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14491.html
标签
axios
评论
发布的文章

Unity数据持久化之Json

2024-08-10 22:08:00

simdjson 高性能JSON解析C 库

2024-08-10 22:08:00

npm常用命令详解(一)

2024-08-10 22:08:34

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!