Hybird App 软键盘挡住输入框的解决办法

当页面上的输入框位于下半屏的时候,点击输入框拉起软键盘之后,会挡住输入框。这个坑以前也填过几次,但是没有记录,这次记录一下。

兼容iOS设备,使用以下css样式:

html,body {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}

兼容Android设备,使用以下zepto代码:

var ua=window.navigator.userAgent.toLowerCase(),os="",tap="click";
if(/android/.test(ua)) os = 'android';
if(/ipad|iphone/.test(ua)) os = 'ios';
if(/ipad|iphone|android/.test(ua)) tap= 'tap';
var bindAndroidScroll =function(that){
    if(os=="android"){
        setTimeout(function(){
            that.scrollIntoViewIfNeeded();
        },500);
    }
}
$("body").on(tap,"input,textarea", function(){
    if(!$(this).prop("readonly")) bindAndroidScroll(this);
});

参考链接:
https://segmentfault.com/q/1010000009348207?sort=created
https://www.cnblogs.com/xiahj/p/8036419.html
https://my.oschina.net/cjlice/blog/625526
https://stackoverflow.com/questions/7417123/android-how-to-adjust-layout-in-full-screen-mode-when-softkeyboard-is-visible/19494006#19494006

你可能感兴趣的:(Hybird App 软键盘挡住输入框的解决办法)