美文网首页
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