安卓虚拟键盘挡住input框解决办法
2024-09-07 12:27:02
问题描述:ios弹出虚拟键盘的时候会自动将页面顶上去,不会遮住input输入框,而安卓则会挡住。
解决办法:
1.使用如下代码来区分安卓,存入localStorage中
if ((navigator.userAgent.match(
/(Android)/i
))) {
/*你的手机版*/
localStorage.setItem("noPC", true);
}
2.判断是安卓端,监听input输入框聚焦事件,input聚焦必定弹出虚拟框,此时给页面加padding-bottom使页面可滚动(因为页面(容器)可滚动时scrollIntoView()才有用!),再使用scrollIntoView()使input框滚动到可视区域,代码如下
$('input').on("focus", function() {
if (localStorage.getItem("noPC")) {
$("#chagePWD").css({
"padding-bottom": "400px",
})
setTimeout(() => {
const activeElement = document.activeElement;
activeElement.scrollIntoView(); //焦点元素滚到可视区域
}, 200);
}
});
3.监听input输入框失去焦点事件,虚拟键盘收起,页面恢复原样,代码如下
$('input').on("blur", function() {
if (localStorage.getItem("noPC")) {
$("#chagePWD").css("padding-bottom", "0px")
}
});
在各安卓手机和安卓平板上亲测兼容良好
scrollIntoView()的解释:
scrollIntoView是一个与页面(容器)滚动相关的API(官方解释),该API只有boolean类型的参数能得到良好的支持(firefox 36+都支持),所以在这里只讨论参数Boolean类型的情况。
调用方法为 element.scrollIntoView() 参数默认为true。
参数为true时调用该函数,页面(或容器)发生滚动,使element的顶部与视图(容器)顶部对齐;
参数为false时,使element的底部与视图(容器)底部对齐。
TIPS:页面(容器)可滚动时才有用!
最新文章
- 现有语言不支持XXX方法
- 【异常】ORA-01536: space quota exceeded for tablespace
- H264解码学习-2015.04.16
- 三、jQuery--Ajax基础--Ajax全接触--扩展知识(跨域)
- 【原】iOSCoreAnimation动画系列教程(二):CAKeyFrameAnimation【包会】
- Windows自带Android模拟器启动失败
- vSphere Client上传镜像
- phpstorm laravel单元测试 配置
- SDS查看部署在集成TOMCAT服务器中的项目目录结构
- js key事件 keyCode大全
- C语言学习_一个简单程序的解释与C学习方法概括
- ZOJ-2587-Unique Attack(最小割的唯一性)
- 01.Net入门知识
- JS中typeof与instanceof的区别 (2010-05-26 10:47:40
- CSS3的background-size
- Java NIO-3
- spring boot 部署
- 常用数据库1 sqlserver
- (字符串处理)Fang Fang -- hdu -- 5455 (2015 ACM/ICPC Asia Regional Shenyang Online)
- jquery,checkbox无法用attr()二次勾选