ios兼容 input输入时弹出键盘框 页面整体上移键盘框消失后在ios上页面不能回弹的问题
(一)前端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上页面不能回弹的问题的更多相关文章
- ubuntu 输入时弹出剪切板候选项
fcitx很坑的把这个功能的快捷键设置成了ctrl + ;结果我在用vim的时候怎么也 没法输入command 不知道是哪次更新引入的,简直是坑人! 我找了半天系统设置都没找到这个快捷键是在哪设置的. ...
- iOS APP 在前台时弹出本地通知
iOS10 之后使用才有效果 1.在 AppDelegate.m 文件里面添加下面的方法. - (void)userNotificationCenter:(UNUserNotificationCent ...
- Android N(7.0) 在ListView里显示EditText时软键盘弹出时会自动切换到全键盘的问题?
Android N(7.0) 在ListView里显示EditText时软键盘弹出时会自动切换到全键盘的问题? 问题症状描述 Activity 在AndroidManifest.xml里设置andro ...
- Android定位&地图&导航——基于百度地图,实现自定义图标绘制并点击时弹出泡泡
一.问题描述 上一次我们使用百度地图实现基本的定位功能,接下来我们继续实现搜索和定位,并使用LocationOverlay绘制定位位置,同时展示如何使用自定义图标绘制并点击时弹出泡泡 如图所示: 二. ...
- VS2015+OpenGL4.0开发编译时弹出错误:glaux.lib(tk.obj) : error LNK2019: 无法解析的外部符号 _sscanf,该符号在函数 _GetRegistrySysColors@8 中被引用
一.问题描述: VS2015+OpenGL4.0开发编译时弹出如下所示的错误: 1>glaux.lib(tk.obj) : error LNK2019: 无法解析的外部符号 _sscanf,该符 ...
- eclipse启动时弹出Failed to create the Java Virtual Machine
eclipse启动时弹出Failed to create the Java Virtual Machine 一.现象 今天装eclipse的时候出现Failed to create the Java ...
- Visual Studio2012打开时弹出“遇到异常:这可能是由某个扩展导致的”错误的解决办法
Visual Studio2012打开时弹出"遇到异常:这可能是由某个扩展导致的"错误的解决办法: 具体问题如下: 分析原因:网上搜集了以下,出现异常的原因是安装了第三方控件,然后 ...
- loadrunner录制时弹出invalid application path!please check if application exists对话框
问题:oadrunner录制时弹出invalid application path!please check if application exists对话框 原因:IE浏览器地址不对,需要手动重新选 ...
- [转]Android在初始化时弹出popwindow的方法 .
转自:http://blog.csdn.net/sxsboat/article/details/7340759 留个人备用0.0 Android中在onCreate()时弹出popwindow,很多人 ...
随机推荐
- [luogu1463 HAOI2007] 反素数 (约数)
传送门 Description 对于任何正整数x,其约数的个数记作g(x).例如g(1)=1.g(6)=4. 如果某个正整数x满足:g(x)>g(i) 0<i<x,则称x为反质数.例 ...
- Linux 内核管理
Linux内核基础:Linux Kernel: Linux内核的体积结构是单内核的,但充分借鉴了微内核设计体系的优点,为内核引入模块化机制,使得虽然是单内核,但工作在模块化的方式下,并且模块可以动态 ...
- 新人--使用layui做的表格,复杂表头,固定列,操作单元格数据计算,点击查询重载表格,可以选择部分或者全部导出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 2015 Multi-University Training Contest 6 hdu 5357 Easy Sequence
Easy Sequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)T ...
- (5)全局异常捕捉【从零开始学Spring Boot】
在一个项目中的异常我们我们都会统一进行处理的,那么如何进行统一进行处理呢? 新建一个类GlobalDefaultExceptionHandler, 在class注解上@ControllerAdvice ...
- oracle定时器执行一遍就不执行或本就不执行
转:http://blog.csdn.net/qq_23311211/article/details/76283689 以sqlplus/ assysdba进入sql命令模式,使用sql:select ...
- [using_microsoft_infopath_2010]Chapter13 SharePoint视图和控制板
本章概要: 1.规划站点的外观,使用View和web部件 2.为登录进来的用户展示相关的表单. 3.为管理员创建视图 4.从表单中收集到的数据中创建报表
- HDU 5168
把边按权值排序后,就相当于求一个子序列以1开始和以n结束.由于边权递增,而且相差>=k,所以,边的顺序也必定是递增的.知道,当处理一条出边时,必定是从入边选择一条最优的边,考虑两个因素,入边的权 ...
- logstash tcp multihost output(多目标主机输出,保证TCP输出链路的稳定性)
在清洗日志时,有一个应用场景,就是TCP输出时,须要在一个主机挂了的情况下,自已切换到下一个可用入口.而原tcp output仅支持单个目标主机设定.故本人在原tcp的基础上,开发出tcp_multi ...
- 【零基础入门学习Python笔记013】元祖:戴上了枷锁的列表
元组:戴上了枷锁的列表 因为和列表是近亲关系.所以元祖和列表在实际使用上是很相似的. 本节主要通过讨论元素和列表究竟有什么不同学习元祖. 元组是不可改变元素的.插入.删除或者排序都不能够.列表能够随意 ...