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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容