ios12中遇到的带input弹窗的错位问题的解决方法

问题描述：

使用fixed定位的弹窗，在ios12的系统里，软键盘调起后，页面整体上移，当软键盘消失时，视觉上页面已经回到原始位置，但其实弹窗的焦点位置仍在软键盘调起时的位置。

解决办法：

这也是参考某位大佬的解决办法

document.body.addEventListener('focusin', () => {
  // 软键盘弹出的事件处理
  this.isReset = false
})
document.body.addEventListener('focusout', () => {
  // 软键盘收起的事件处理
  this.isReset = true
  setTimeout(() => {
    // 当焦点在弹出层的输入框之间切换时先不归位
    if (this.isReset) {
     window.scroll(0, 0) // 失焦后强制让页面归位
    }
  }, 300)
})

尝试解决的其他方法

尝试不使用fix定位，选择的absolute，判断input失焦时，使用window.scroll()，但是需要解决的问题很多

  1. 不同手机的input框在软键盘收起时情况不一样。苹果手机软键盘收起时，input框就失焦，但是小米手机键盘收起时，input框不失焦
  2. 使用absolute定位后，软键盘出现页面会上移，软键盘消失时，页面不能恢复原来的位置

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • iOS 12中无法获取WiFi的SSID了？别慌看这里！

    iOS 12中无法获取WiFi的SSID了？别慌看这里！

    前言 SSID全称Service Set IDentifier, 即Wifi网络的公开名称.在IOS 4.1以上版本提供了公开的方法来获取该信息. 但是最近,Apple于北京时间9月17日晚在官网发布了Xcode 10正式版,QiShare团队成员于9月18日中午统一升级以对现有项目做适配.期间,作者发现某项目使用Xcode 10编译出的App在iOS 12中无法获取WiFi的SSID. 敲黑板:获取WiFi的SSID是智能硬件App中配网模块的常用功能,各大厂商要针对iOS 12适配一波了(@

  • iOS 12+ 中检测网络访问的方法

    我最近写了一篇文章,来介绍 iOS 在连接新的 Wi-Fi 网络时,如何在弹出一个 web view 以让用户登录或注册之前,检测 Captive Portals (强制网络门户).如果你连接过诸如酒店.酒吧或咖啡店等地的公共 Wi-Fi 网络,对这个应该会比较熟悉.如果你不熟悉 iOS 中 Captive Portals 的工作方式,可以查看 Solving the Captive Portal Problem on iOS 这篇文章,以了解一些背景知识. 多年来,Apple 的 Reacha

  • iOS 12适配以及问题小记

    前言 本文主要给大家介绍了关于iOS12适配及问题的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 版本信息 Xcode: Version 10.0 beta (10L176w) macOS: 10.14 Beta (18A293u) iOS: 12.0(16A5288q) 问题及解决过程 1,StatusBar内部结构改变 现象:crash crash log: 1,-[_UIStatusBarIdentifier isEqualToString:]: unrecog

  • iOS12新特性之推送通知详解

    iOS12新特性之推送通知详解

    序言 众所周知,iOS中消息推送扮演了不可或缺的位置.不管是本地通知还是远程通知无时不刻的在影响着我们的用户体验,以致于在iOS10的时候苹果对推送大规模重构,独立了已 UserNotifications 和 UserNotificationsUI 两个单独的framework,可见重要性一斑.针对于WWDC18苹果又给我们带来了什么惊喜呢? 新特性 Grouped notifications 推送分组 Notification content extensions 推送内容扩展中的可交互和动态

  • Android、iOS和Java通用的AES128加密解密示例代码

    前言 移动端越来越火了,我们在开发过程中,总会碰到要和移动端打交道的场景,比如android和iOS的打交道.为了让数据交互更安全,我们需要对数据进行加密传输. 这篇文章给大家分享AES的加密和解密.Android和ios通用的AES加密算法.大家可以直接集成到自己的项目.服务器接口如果是用Java写的话.整个框架都完美了.如果是.NET编写的后台接口的话.得改造一下哦 IOS加密 /*加密方法*/ (NSString *)AES256EncryptWithPlainText:(NSString

  • 12个iOS技术面试题及答案总结

    前言 随着移动互联网科技不断的发展和创新,如今无论是公司还是开发者或设计师个人而言,面试都是一项耗时耗钱的项目,而面对iOS开发者及设计师在面试时可能会遇到的问题进行了筛选与汇总.下面我们一起来一下看看吧. 一.如何绘制UIView? 绘制一个UIView最灵活的方法就是由它自己完成绘制.实际上你不是绘制一个UIView,而是子类化一个UIView并赋予绘制自己的能力.当一个UIView需要执行绘制操作时,drawRect:方法就会被调用,覆盖此方法让你获得绘图操作的机会.当drawRect:方

  • ios12中遇到的带input弹窗的错位问题的解决方法

    问题描述: 使用fixed定位的弹窗,在ios12的系统里,软键盘调起后,页面整体上移,当软键盘消失时,视觉上页面已经回到原始位置,但其实弹窗的焦点位置仍在软键盘调起时的位置. 解决办法: 这也是参考某位大佬的解决办法 document.body.addEventListener('focusin', () => { // 软键盘弹出的事件处理 this.isReset = false }) document.body.addEventListener('focusout', () => {

  • ASP.NET Core 2.0 带初始参数的中间件问题及解决方法

    ASP.NET Core 2.0 带初始参数的中间件问题及解决方法

    问题 如何在ASP.NET Core 2.0向中间件传入初始参数? 答案 在一个空项目中,创建一个POCO(Plain Old CLR Object)来保存中间件所需的参数: public class GreetingOptions { public string GreetAt { get; set; } public string GreetTo { get; set; } } 添加一个中间件: public class GreetingMiddleware { private readon

  • AngularJS中update两次出现$promise属性无法识别的解决方法

    AngularJS中update两次出现$promise属性无法识别的解决方法

    前言 本文主要介绍的是在AngularJS中update两次出现$promise属性无法识别的解决方法,下面话不多说,先来看看错误提示,然后再看看解决的办法吧. 一.错误信息如下: ERROR 2015-12-02 14:33:17,653 http-bio-8080-exec-42 o.s.s.r.i.e.InternalErrorExceptionMapper - Unrecognized field "$promise" (class com.inetpsa.fnd.rest.c

  • JSP中内建exception对象时出现500错误的解决方法

    本文实例讲述了JSP中内建exception对象时出现500错误的解决方法.分享给大家供大家参考,具体如下: 尝试使用JSP的内建exception对象,写了下面三个文件.思路很简单,文件index若提交字串为空,则get抛出异常,交由error.jsp处理.但实际却不能正常运行,会出现IE的500错误页面.环境为Tomcat 5.5,IE6.0. 在sun的论坛上有人贴出了原因,是IE的某个设置.Tomcat5.0以后的版本error page在处理时会返回error code 500.而IE

  • Android编程中出现The connection to adb is down问题的解决方法

    本文分析了Android编程中出现The connection to adb is down问题的解决方法.分享给大家供大家参考,具体如下: 1.报错: BUILD FAILED D:\workspace\ganji\build.xml:144: The following error occurred while executing this line: D:\workspace\ganji\build.xml:271: Unable to delete file D:\workspace\g

  • Thinkphp中volist标签mod控制一定记录的换行BUG解决方法

    本文实例讲述了Thinkphp中volist标签mod控制一定记录的换行BUG解决方法.分享给大家供大家参考.具体方法如下: 一.BUG描述: 存在于thinkphp 2.0 版本 Mod属性还用于控制一定记录的换行,例如: 复制代码 代码如下: <volist name="list" id="vo" mod="5" > {$vo.name} <eq name="mod" value="4"

  • WPF中不规则窗体与WindowsFormsHost控件兼容问题的解决方法

    本文实例讲述了WPF中不规则窗体与WindowsFormsHost控件兼容问题的解决方法.分享给大家供大家参考.具体方法如下: 这里首先说明一下,有关WPF中不规则窗体与WindowsFormsHost控件不兼容的问题,网上给出的很多解决方案不能满足所有的情况,是有特定条件的,比如有一篇<WPF中不规则窗体与WebBrowser控件的兼容问题解决办法>(感兴趣的朋友可以自己百度一下这篇文章).该网友的解决办法也是别出心裁的,为什么这样说呢,他的webBrowser控件的是单独放在一个Form中

  • php中json_encode处理gbk与gb2312中文乱码问题的解决方法

    本文讲述了php中json_encode处理gbk与gb2312中文乱码问题的解决方法,具体方法如下: 1.json_encode()中文在gbk/gb2312中对中文返回为null $arr = array ( array ( 'catid' => '4', 'catname' => 'www.jb51.net', 'meta_title' => '我们' ) ); echo json_encode($arr); 运行结果: [{"catid":"4&qu

  • java中hasNextInt判断后无限循环输出else项的解决方法

    话不多说,上来就是干! ?12345678910111213141516171819202122232425262728293031323334353637 import java.util.Scanner; public class Test_hasNextInt { /** * @param args */ public static void main(String[] args) { // TODO Auto-generated method stub Scanner sc = new

  • Android线程中设置控件的值提示报错的解决方法

    本文实例讲述了Android线程中设置控件的值提示报错的解决方法.分享给大家供大家参考,具体如下: 在Android线程中设置控件的值一般会与Handler联合使用,如下: package com.yarin.android.Examples_04_15; import android.app.Activity; import android.os.Bundle; import android.os.Handler; import android.os.Message; import andro

随机推荐