美文网首页
h5页面,安卓端,输入框被弹出的键盘挡住,ios正常

h5页面,安卓端,输入框被弹出的键盘挡住,ios正常

作者: 我们都会更好的_b3fc | 来源:发表于2019-12-16 17:53 被阅读0次

    bug描述:当表单输入框过多,页面太长,点击输入框,安卓手机,键盘会挡住下面的输入框,而且概率性的不能上下滑动整个页面,所以导致底下的输入框,你输入了什么,你不能及时看到。但Ios端,当键盘弹出时,页面会自动上移,所以这个针对安卓和Ios要做不同的处理。

    解决方法:

    //  1.监听input输入框点击事件
    $("input").on("click", function() {
               //  2.判断浏览器是否是Ios 
                var ua = navigator.userAgent.toLowerCase()
                if(ua.match(/iPhone\sOS/i) == "iphone os") {
                    return true;
                }else {
                    // 3.对非Ios做处理
                    setTimeout(function () {
                        document.body.scrollTop = document.body.scrollHeight;
                    }, 300);
                }
            })
    

    相关文章

      网友评论

          本文标题:h5页面,安卓端,输入框被弹出的键盘挡住,ios正常

          本文链接:https://www.haomeiwen.com/subject/kfbdnctx.html