ios兼容 input输入时弹出键盘框 页面整体上移键盘框消失后在ios上页面不能回弹的问题

时间:2023-01-20 09:29:05

(一)前端h5混合开发手机端ios  当有input输入时,手机下方弹出键盘使页面上移,当输入完成,键盘消失后页面显示回到原位,但实际不能点击(可点击上方区域,有反应),也就是说实际是没有回弹。

解决办法:

给input加blur事件,代码如下:

$('input').on('blur', function () {
setTimeout(function(){
var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
window.scrollTo(0, Math.max(scrollHeight - 1, 0));
}, 100);
});

(二)ios键盘唤起,键盘收起以后页面不归位 (vue中)

问题详情描述:

输入内容,软键盘弹出,页面内容整体上移,但是键盘收起,页面内容不下滑

出现原因分析:

固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 在失去焦点的时候给一个事件

解决办法:

<div class="list">
<div class="title"><span>啦啦啦</span></div>
<div class="content">
<input class="contentInput"
placeholder="你叫啥"
v-model="peopleList.name"
@focus="changefocus()"
@blur.prevent="changeBlur()"/> </div>
</div>
changeBlur(){
let u = navigator.userAgent, app = navigator.appVersion;
let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if(isIOS){
setTimeout(() => {
const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
window.scrollTo(0, Math.max(scrollHeight - 1, 0))
}, 200)
}
}

拓展知识: position: fixed的元素在ios里,收起键盘的时候会被顶上去,特别是第三方键盘

(三)一般出现在IOS设备中的微信内部浏览器,出现的条件为:

  • 页面高度过小
  • 聚焦时,页面需要往上移动的时候

所以一般input在页面上方或者顶部都不会出现无法回弹

ios兼容 input输入时弹出键盘框 页面整体上移键盘框消失后在ios上页面不能回弹的问题的更多相关文章

  1. ubuntu  输入时弹出剪切板候选项

    fcitx很坑的把这个功能的快捷键设置成了ctrl + ;结果我在用vim的时候怎么也 没法输入command 不知道是哪次更新引入的,简直是坑人! 我找了半天系统设置都没找到这个快捷键是在哪设置的. ...

  2. iOS APP 在前台时弹出本地通知

    iOS10 之后使用才有效果 1.在 AppDelegate.m 文件里面添加下面的方法. - (void)userNotificationCenter:(UNUserNotificationCent ...

  3. Android N&lpar;7&period;0&rpar; 在ListView里显示EditText时软键盘弹出时会自动切换到全键盘的问题&quest;

    Android N(7.0) 在ListView里显示EditText时软键盘弹出时会自动切换到全键盘的问题? 问题症状描述 Activity 在AndroidManifest.xml里设置andro ...

  4. Android定位&amp&semi;地图&amp&semi;导航——基于百度地图,实现自定义图标绘制并点击时弹出泡泡

    一.问题描述 上一次我们使用百度地图实现基本的定位功能,接下来我们继续实现搜索和定位,并使用LocationOverlay绘制定位位置,同时展示如何使用自定义图标绘制并点击时弹出泡泡 如图所示: 二. ...

  5. VS2015&plus;OpenGL4&period;0开发编译时弹出错误:glaux&period;lib&lpar;tk&period;obj&rpar; &colon; error LNK2019&colon; 无法解析的外部符号 &lowbar;sscanf,该符号在函数 &lowbar;GetRegistrySysColors&commat;8 中被引用

    一.问题描述: VS2015+OpenGL4.0开发编译时弹出如下所示的错误: 1>glaux.lib(tk.obj) : error LNK2019: 无法解析的外部符号 _sscanf,该符 ...

  6. eclipse启动时弹出Failed to create the Java Virtual Machine

    eclipse启动时弹出Failed to create the Java Virtual Machine 一.现象 今天装eclipse的时候出现Failed to create the Java ...

  7. Visual Studio2012打开时弹出&OpenCurlyDoubleQuote;遇到异常:这可能是由某个扩展导致的”错误的解决办法

    Visual Studio2012打开时弹出"遇到异常:这可能是由某个扩展导致的"错误的解决办法: 具体问题如下: 分析原因:网上搜集了以下,出现异常的原因是安装了第三方控件,然后 ...

  8. loadrunner录制时弹出invalid application path!please check if application exists对话框

    问题:oadrunner录制时弹出invalid application path!please check if application exists对话框 原因:IE浏览器地址不对,需要手动重新选 ...

  9. &lbrack;转&rsqb;Android在初始化时弹出popwindow的方法 &period;

    转自:http://blog.csdn.net/sxsboat/article/details/7340759 留个人备用0.0 Android中在onCreate()时弹出popwindow,很多人 ...

随机推荐

  1. MySQL中的常用工具

    一.mysql 客户端连接工具 二.myisampack MyISAM表压缩工具 三.mysqladmin MySQL管理工具 四.mysqlbinlog 日志管理工具 五.mysqlcheck My ...

  2. 编辑 Ext 表格(一)——— 动态添加删除行列

    一.动态增删行 在 ext 表格中,动态添加行主要和表格绑定的 store 有关, 通过对 store 数据集进行添加或删除,就能实现表格行的动态添加删除.   (1) 动态添加表格的行  gridS ...

  3. java中用spring实现数组类型输出

    java 中的几个数组类型 1.Department类 package com.yy.collection; import java.util.List; import java.util.Map; ...

  4. Linux的IO性能监控工具iostat详解

    Linux系统出现了性能问题,一般我们可以通过top.iostat.free.vmstat等命令来查看初步定位问题.其中iostat可以提供更丰富的IO性能状态数据. . 基本使用 $iostat - ...

  5. mysql union 详解

    Union:作用:把2次或多次查询结果合并起来要求:两次查询的列数一致推荐:查询的每一列,相对应的列类型也一样 可以来自于多张表 多次sql语句取出的列名可以不一致,此时,以第1个sql的列名为准 例 ...

  6. centos7下环境配置

    1:  安装memcached 问题:error: libevent is required. If it's already installed, specify its path using –w ...

  7. Python中的元类和&lowbar;&lowbar;metaclass&lowbar;&lowbar;

    1.什么是元类 元类让你来定义某些类是如何被创建的,从根本上说,赋予你如何创建类的控制权.可以把元类想成是一个类中类,或是一个类,它的实例是其它的类.当某个类调用type()函数时,你就会看到它到底是 ...

  8. python with语句上下文管理的两种实现方法

    在编程中会经常碰到这种情况:有一个特殊的语句块,在执行这个语句块之前需要先执行一些准备动作:当语句块执行完成后,需要继续执行一些收尾动作.例如,文件读写后需要关闭,数据库读写完毕需要关闭连接,资源的加 ...

  9. mono环境变量

    mono环境变量 2013-05-11 01:14:33|  分类: mono|举报|字号 订阅     下载LOFTER我的照片书  |     Name mono - Mono's ECMA-CL ...

  10. 一步一步重写 CodeIgniter 框架 &lpar;12&rpar; —— 代码再重构,回归 CI

    第一课中搭建的基本的 框架模型, 只有一个 index.php 作为执行文件,按这种方式最不稳定的因素就是路径的问题. 我们经常需要通过合适的参数,比如 load_class('output') 或 ...