解决苹果手机(IOS)input失焦后,页面不恢复的问题
var winHeight = $(window).height();
var u = navigator.userAgent, app = navigator.appVersion
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
var adOrIosTime = 0;
$("input").blur(function(){
clearTimeout(adOrIosTime);
if (isIOS) {
adOrIosTime = setTimeout(()=>{
if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA'){
return;
}
let result = 'pc';
if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
result = 'ios';
}else if(/(Android)/i.test(navigator.userAgent)) { //判断Android
result = 'android'
}
if( result = 'ios' ){
document.activeElement.scrollIntoViewIfNeeded(true);
}
},100)
}else{
adOrIosTime = setTimeout(()=>{
window.scrollTo(0, Math.max(winHeight - 1, 0));
}, 100);
}
});
注意:***********************有时因为异步操作dom, 因此上边方法初始化时绑定不了事件**************可以写成内联方法**************************
<input type='text' onblur="inputBlur();"/>
<script type="text/javascript">
var winHeight = $(window).height();
var u = navigator.userAgent, app = navigator.appVersion
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
var adOrIosTime = 0;
function inputBlur(){
clearTimeout(adOrIosTime);
if (isIOS) {
adOrIosTime = setTimeout(()=>{
if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA'){
return;
}
let result = 'pc';
if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
result = 'ios';
}else if(/(Android)/i.test(navigator.userAgent)) { //判断Android
result = 'android'
}
if( result = 'ios' ){
document.activeElement.scrollIntoViewIfNeeded(true);
}
},100)
}else{
adOrIosTime = setTimeout(()=>{
window.scrollTo(0, Math.max(winHeight - 1, 0));
}, 100);
}
}
</script>
解决苹果手机(IOS)input失焦后,页面不恢复的问题的更多相关文章
- fastclick使用与 fastclick ios11.3相关bug原因(ios输入框点击变得不灵敏,ios input失焦后,页面上移,点击不了)
FastClick 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,就有了FastClick. 安装fastc ...
- 兼容h5在ios上登录窗口input失焦后页面不会滚
$("#logincode").blur(function(){ //滚动到顶部 window.scrollTo(0, 0); })一般多用于密码框失焦后,页面不回滚
- [BUG]微信浏览器 iOS input 失焦页面不回弹
描述 ios13. ios中,input唤醒软键盘后,body整体会向上滚动,如果input框输入完成确定后,如果页面在最底部则不回弹,导致fixed布局实际效果上移,fixed布局内按钮点不到. 如 ...
- iOS推送后页面跳转
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launc ...
- 移动端登录页面input获取焦点后页面布局及输入框上移的问题
最近切微信页面的时候,发现移动端的登录页面,带输入框的那种,如图: 从页面本身来看没有什么问题,上传至测试服务器,用iphone访问也没有什么问题,但是当同事用Android手机获取焦点后,问题来了, ...
- 解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)
前言:微信H5项目,ios端出现了软键盘输完隐藏后页面不会回弹,下方会有一大块留白 最近微信和ios都有版本升级,不知道是哪边升级造成的,但是经过测试,软键盘收起后,再滚动一下页面,下面的留白就会消失 ...
- ios键盘弹起 body的高度拉长,页面底部空白问题。ios软键盘将页面抵到上面后,关闭软键盘页面不回弹的问题。
js 监听ios手机键盘弹起和收起的事件 /* js 监听ios手机键盘弹起和收起的事件 */ document.body.addEventListener('focusin', () => { ...
- bootsrtap h5 移动版页面 在苹果手机ios滑动上下拉动滚动卡顿问题解决方法
bootsrtap h5 移动版页面 在苹果手机ios滑动上下拉动滚动卡顿问题解决方法 bootsrtap框架做的h5页面,在android手机下没有卡顿问题,在苹果手机就一直存在这问题,开始毫无头绪 ...
- input输入框失去焦点,软键盘关闭后,滚动的页面无法恢复到原来位置
H5微信页面开发,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,导致弹框里的按钮响应区域错位. 解决方案:给输入框(或select选择框)添加失去焦点的 ...
随机推荐
- MySQL命令行脚本
1. 命令行连接 打开终端,运行命令 mysql -uroot -p 回车后输入密码,当前设置的密码为mysql 退出登录 quit 和 exit 或 ctrl+d 查看版本:select versi ...
- 网站复制工具:HTTrack
HTTrack简介: HTTrack是Kali中内置的工具,主要用于克隆网站.渗透测试人员可以利用它来在自主可控制的环境中查看该网站的完整内容:所有离线文件.同时可以利用该网站的副本来开发假冒的钓鱼网 ...
- ftrace使用
前段时间遇到个问题,有个后继音频数据处理线程调度不及时导致音频输出延迟,音视频不同步. 因此从系统上入手,采用ftrace进行debug,来看有哪些线程会去抢占音频数据处理线程. ftrace 提供了 ...
- CSS学习(1)简介
什么是 CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与 ...
- mysql 隔离性与隔离级别
提到事务,你肯定不陌生,和数据库打交道的时候,我们总是会用到事务.最经典的例子就是转账,你要给朋友小王转 100 块钱,而此时你的银行卡只有 100 块钱. 转账过程具体到程序里会有一系列的操作,比如 ...
- logstash output到kafka记录与总结( No entry found for connection 2)
简述 本文记录logstash的output配置为kafka的过程.这里是简单的例子,输入为stdin,本文主要目的是为了记录在这次配置过程中遇到的问题和解决的过程及总结. 关于kafka集群的搭建可 ...
- cookie的封装
今天逛论坛,看到一个看起来写得好的函数,特此贴出分享: 原文地址[http://www.html-js.com/article/2638 ] 这个地址[https://github.com/jaywc ...
- VS Code的git的使用方法
上一篇文章中记录了vscode中git的配置过程VS Code中配置git 这篇文章中记录下vscode中git的简单使用 vscode不是一个IDE没有新建工程的方法 我一般是在本地中新建一个工程文 ...
- Git主库私库相关操作操作
命令1: git remote add 库名称 库地址 说明:写好的代码提交到两个git远端,git remote add是将另一个库地址设置进来 命令2: git fetch 库名称 分支名称 说明 ...
- CentOS安装MySQL的步骤
1.下载 Mysql yum包 http://dev.mysql.com/doc/mysql-yum-repo-quick-guide/en/ 下载到本地再上传到服务器,或者使用wget 直接下载 w ...