H5输入框在输入信息的时候 页面会变形 并且在页面不变形的时候 键盘会遮挡 输入框的解决办法

Posted lzk318

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5输入框在输入信息的时候 页面会变形 并且在页面不变形的时候 键盘会遮挡 输入框的解决办法相关的知识,希望对你有一定的参考价值。

 $(document).ready(function () { $(‘body‘).css({‘height‘:$(window).height()})});//这行是解决输入框在输入信息弹出键盘后页面变形
 $(function () {
//微信内置浏览器浏览H5页面弹出的键盘遮盖文本框的解决办法
window.addEventListener("resize", function () {
     if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") {
     window.setTimeout(function () {
    document.activeElement.scrollIntoViewIfNeeded();
    }, 0);
   }
   })
})











以上是关于H5输入框在输入信息的时候 页面会变形 并且在页面不变形的时候 键盘会遮挡 输入框的解决办法的主要内容,如果未能解决你的问题,请参考以下文章

Android软键盘弹出,覆盖h5页面输入框问题

Android软键盘弹出,覆盖h5页面输入框问题

H5防止安卓手机软键盘弹出挤压页面导致变形的方法

[vue]利用自定义指令处理系统键盘遮挡input输入框

微信H5--手机键盘弹起导致页面变形

Response.Write输出导致页面变形和页面白屏解决办法