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,很多人 ...
随机推荐
- N3-1 - 数组 - convert-sorted-array-to-binary-search-tree
题目描述: Given an array where elements are sorted in ascending order, convert it to a height balanced B ...
- 人脸识别中的harr特征提取(转)
影响AdaBoost人脸检测训练算法速度很重要的两方面是特征选取和特征计算.选取的特征为矩特征为Haar特征,计算的方法为积分图. (1)Haar特征: Haar特征分为三类:边缘特征.线性特 ...
- 【codeforces 723E】One-Way Reform
[题目链接]:http://codeforces.com/contest/723/problem/E [题意] 给你一个无向图; 让你把这m条边改成有向图; 然后使得出度数目等于入度数目的点的数目最多 ...
- applicationContext-solr.xml
一.动态切换单机和集群 spring-solr 的配置 <!-- 单机版 solrj --> <bean id = "httpSolrServer" class= ...
- easyui获取当前点击对象tabs的title和Index
观察上面打开的tabs选项卡,肯定会有一个目前是被选中状态,而这个状态的class属性也肯定是和其他tabs不一样的,有个class等于tabs-selected的 var title = $('.t ...
- 02springMVC理解DispatcherServlet
DispatcherServlet的作用 DispatcherServlet在Web.xml中的配置 上下文关系 DispatcherServlet初始化顺序 DispatcherServlet中使用 ...
- Apache 做反向代理服务器
apache做反向代理服务器 apache代理分为正向代理和反向代理: 1 正向代理: 客户端无法直接访问外部的web,需要在客户端所在的网络内架设一台代理服务器,客户端通过代理服务器访问外部的web ...
- 【Android 应用开发】 ActionBar 样式具体解释 -- 样式 主题 简单介绍 Actionbar 的 icon logo 标题 菜单样式改动
作者 : 万境绝尘 (octopus_truth@163.com) 转载请著名出处 : http://blog.csdn.net/shulianghan/article/details/3926916 ...
- NYOJ_94 cigarettes 递归VS迭代
题目地址 分析: 英文题事实上看懂意思和正常的也都差点儿相同.就算有几个单词不认识也无伤大雅. 一共同拥有n支烟,每天抽k支. 每抽完k支,会得到一仅仅. a组数据. 输入n k的个数.输出一共抽了 ...
- hdu3966_树链剖分
近期在强化知识点深度.发现树链剖分不是非常会写了. 回想一下改动操作: 若两个点在同一条链上,则直接改动这段区间. 若不在同一条链上,改动深度较大的点到其链顶端的区间,同一时候将这个点变为他所在链顶端 ...