Apache Cordova（phonegap）html input 被软键盘遮挡

最新推荐文章于 2022-11-17 11:46:43 发布

weixin_33753003

最新推荐文章于 2022-11-17 11:46:43 发布

阅读量232

点赞数

文章标签：移动开发 python

原文链接：https://my.oschina.net/guodapeng/blog/603531

版权

2019独角兽企业重金招聘Python工程师标准>>>

由于我们的项目在 body 上应用了 position:fixed; 样式，造成 android 设备上，input 不会被软键盘推起。（ios 设备不会出现这个 bug）。

事实上 position:relative; 的时候是不会产生这个bug的。

基于以上条件，我们就用下面粗暴的方式进行治疗。

//当 input 获得焦点时
$("input").focus(function(){
    $("body").css("position","relative");
});
//当 input 失去焦点时
$("input").blur(function(){
    $("body").css("position","fixed");
});

如果只是 Android 这样就ok了。

但是在 ios 上运行时，屏幕会一闪。所以在 ios 上我们就不用这个方法了，反正 ios 的 input 是正常的。

//检查 浏览器
if(navigator.userAgent.indexOf("Safari") != -1){
    $("input").focus(function(){
        $("body").css("position","relative");
    });
    $("input").blur(function(){
        $("body").css("position","fixed");
    });
}

转载于:https://my.oschina.net/guodapeng/blog/603531