微信打开网页键盘弹起后页面会被顶上去,键盘收起,页面没有回到原来的位置。完美解决方式。

正常页面:

微信打开网页键盘弹起后页面会被顶上去,键盘收起,页面没有回到原来的位置。完美解决方式。_第1张图片

 

 键盘拉起页面

微信打开网页键盘弹起后页面会被顶上去,键盘收起,页面没有回到原来的位置。完美解决方式。_第2张图片

键盘收起页面

微信打开网页键盘弹起后页面会被顶上去,键盘收起,页面没有回到原来的位置。完美解决方式。_第3张图片

 

 解决方案:在点击按钮那里或者是input失去焦点时加下面其中一个即可解决。 通过scrollTop滚动来解决。

 scrollTop

$("input").blur(function () {
   $("html,body").animate({scrollTop: document.documentElement.clientHeight},500);
});

或者是scrollTo

//滚动到顶部
window.scrollTo(0, 0);
//滚动到底部
window.scrollTo(0, document.documentElement.clientHeight); 

 

完美解决方案: 无bug(根据当前滚动条的位置来计算,失去焦点后,重新让滚动条滚动到之前的位置,太完美了)

    解决方案:给输入框(或select选择框)添加失去焦点的事件,当输入框失去焦点,页面自动滚动到顶部,并且需要加定时器,否则偶尔会失效。

$("input").blur(function () {
        setTimeout(function() {
                var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
                window.scrollTo(0, Math.max(scrollHeight - 1, 0));
        }, 100);
    });

 参考:https://blog.csdn.net/weixin_42573146/article/details/85044386

你可能感兴趣的:(javascript,from表单处理)