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,很多人 ...
随机推荐
- IOS开发:官方自带的JSON使用
apple在ios5的时候提供了json的相关处理api,其中最主要的是NSJSONSerialization类. + (BOOL)isValidJSONObject:(id)obj; + (NSDa ...
- linux github 添加ssh
1.本地生成key, xxx 是github 的账号, 执行下面命令一路下一步 ssh-keygen -t rsa -C "xxx" 2.复制下面的public key 到git ...
- python基础:局部变量--全局变量的使用
局部变量: 使用原则:仅在本函数内部使用的变量,其他函数无法使用本函数的变量 代码: def function1(): a = 2 #定义一个局部变量 print(a) def function2() ...
- C#基础概念 代码样例
C# int与string一起操作时注意 1 int a1= 1; 2 string a2= "2"; 3 Console.WriteLine(a1+a2); 4 Console. ...
- cogs 969. [NOIP2006] 数列
969. [NOIP2006] 数列 ★☆ 输入文件:sequenc.in 输出文件:sequenc.out 简单对比时间限制:1 s 内存限制:162 MB 题目描述 给定一个正整数 ...
- 日志log配置理解
实际生产中,每天都有大量的日志生成,单个文件(FileAppender)已经不能满足要求,RollingFileAppender继承了FileAppender,并提供了更多的功能: 每天生成一个日志文 ...
- Scrapy系列教程(6)------怎样避免被禁
避免被禁止(ban) 有些网站实现了特定的机制,以一定规则来避免被爬虫爬取. 与这些规则打交道并不easy,须要技巧,有时候也须要些特别的基础. 假设有疑问请考虑联系 商业支持 . 以下是些处理这些网 ...
- 在IntelliJ IDEA中创建Web项目
在IntelliJ IDEA中创建Web项目 在IntelliJ IDEA中创建Web项目1,创建Maven WebProject选择File>New>Project 出现New Proj ...
- chrome打开网址但是没有地址栏
chrome打开网址但是没有地址栏 C:\Users\Administrator>C:\Users\Administrator\AppData\Local\Google\Chrome\Appli ...
- jQuery的CSS操作
.css()--获取匹配元素集合中的第一个元素的样式属性的值设置每一个匹配元素的一个或多个CSS属性. .hasClass()--确定不论什么一个匹配元素是否有被分配给定的(样式)类: .addCla ...