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,很多人 ...
随机推荐
- C语言基础 (5) 常用操作符
01 课程回顾 变量的起名:字母数字下划线 不能是关键字 常量 变量提升:老的编译器这样会报错 运算符:sizeof.+.-.x … … 进制: 1111 8421 计算机几乎都是二进制系统,而且是以 ...
- sql修改字段值
update dfw_USER_ACCOUNTS set USER_INTEGRAL="20" where USER_INTEGRAL="17"
- Oracle 知识积累
1.oracle存储过程中is和as的区别 在存储过程(PROCEDURE)和函数(FUNCTION)中没有区别,在视图(VIEW)中只能用AS不能用IS,在游标(CURSOR)中只能用IS不能用AS ...
- 喵哈哈村的魔法考试 Round #3 (Div.2)
菜的抠脚 A 题解:判断能否构成一个三角形. #include "iostream" #include "algorithm" #include "c ...
- ELO kernels 记录
these kernel for discuss how to handle outliers in target values. 一:Ashish Gupta: 在16年6月到18年8月,激活卡的人 ...
- 洛谷P1055 ISBN号码
题目描述 每一本正式出版的图书都有一个ISBN号码与之对应,ISBN码包括 999 位数字. 111 位识别码和 333 位分隔符,其规定格式如x-xxx-xxxxx-x,其中符号-就是分隔符(键盘上 ...
- SQLAlchemy小知识点
1.创建数据库模型的时候增加添加上注释SQLAlchemy1.2新增了comment参数telephone = db.Column(db.String(11), nullable=False, com ...
- 【Codeforces Round #507 (Div. 2, based on Olympiad of Metropolises) A】Palindrome Dance
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] i从1..n/2循环一波. 保证a[i]和a[n-i+1]就好. 如果都是2的话填上min(a,b)*2就好 其他情况跟随非2的. ...
- 【codeforces 805D】Minimum number of steps
[题目链接]:http://codeforces.com/contest/805/problem/D [题意] 给你一个字符串; 里面只包括a和b; 让你把里面的"ab"子串全都去 ...
- static final常量变量的正确书写规范
AccountConstants.java类 命名:常量类以Constants单词命名结尾 package com.paic.pacz.core.salesmanage.util; import ja ...