h5页面键盘弹出影响页面布局（兼容）

其实弹框之所以影响页面布局，我碰到的一般都是因为页面时position:fixed时，键盘一弹出，布局就乱了，我的解决方案是，首先就是把fixed尽可能的改成其他的，接着监听窗口大小变化事件，然后处理ios兼容问题

代码如下：

//监听窗口大小变化事件
window.addEventListener('resize', function () {if(document.activeElement.tagName === 'INPUT'){document.activeElement.scrollIntoView({behavior: "smooth"})}
})

//但是仅靠这段代码，安卓的还好，但是ios的不可以，在键盘弹出时，页面向上移，键盘收起后，页面没有回来，?

然后又寻找解决方案，代码如下，先判断机型，如果是ios就监听一下输入框的失焦事件，代码如下：

var u = navigator.userAgent, app = navigator.appVersion
var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
$(document).ready(function(){$("input").blur(function(){if (isIOS) {blurAdjust()// alert("1231321233")}});
});
// 解决苹果不回弹页面
function blurAdjust(e){setTimeout(()=>{// alert("1231321233")if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA'){return}let result = 'pc';if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOSresult = 'ios'}else if(/(Android)/i.test(navigator.userAgent)) {  //判断Androidresult = 'android'}if( result = 'ios' ){document.activeElement.scrollIntoViewIfNeeded(true);}},100)
}

以上解决了我的输入框弹出问题。如果您有更好的方法，跪求分享~

h5页面键盘弹出影响页面布局（兼容）相关推荐

移动端网站，键盘弹出对页面的影响
在移动端网站中,ios与安卓键盘弹出时对页面有不同的处理方式. ios,键盘弹出但整体页面高度不变. 安卓,页面高度=屏幕高度-键盘高度这样对页面样式就会造成不同的影响. 当有表单弹窗,且弹窗高度在 ...
js防止安卓手机软键盘弹出挤压页面导致变形的方法
h5防止安卓手机软键盘弹出挤压页面导致变形的方法输入框定位在底部,手机端打开,输入框聚焦后软键盘打开为什么会瞬间自动关闭呢? 先看看问题: 1.原来是这样的: 2.在苹果手机里面是正常的: 3.到了 ...
（小技巧）h5 手机键盘弹出收起的处理
本文转载于思否社区专栏:随笔作者:hzzly 前言:前段时间也是应项目的需求开始了 h5 移动端的折腾之旅,在目前中台的基础上扩展了两个 ToC 移动端项目,下面就是在 h5 移动端表单页面键盘弹出 ...
Android 软键盘弹出时把布局顶上去，控件乱套解决方法
Android 软键盘弹出时把布局顶上去,控件乱套解决方法参考文章: (1)Android 软键盘弹出时把布局顶上去,控件乱套解决方法 (2)https://www.cnblogs.com/zhuj ...
input获取焦点软键盘弹出影响定位
解决移动端底部fixed和input获取焦点软键盘弹出影响定位的问题 $(document).ready(function() { va ...
Android中软键盘弹出时关于布局的问题
当在Android的layout设计里面如果输入框过多,则在输入弹出软键盘的时候,下面的输入框会有一部分被软件盘挡住,从而不能获取焦点输入. 解决办法: 方法一:在你的activity中的oncrea ...
Android中软键盘弹出可能遮挡布局
当在Android的layout设计里面如果输入框过多,则在输入弹出软键盘的时候,下面的输入框会有一部分被软件盘挡住,从而不能获取焦点输入. 解决办法: 方法一:在你的activity中的oncrea ...
H5软键盘弹出挡住输入框解决
winResize() function winResize() {// var oHeight=$(window).height();$(window).resize(function () { / ...
仿QQ空间评论随软键盘弹出和收回一个输入布局
先来看一下效果图: 点击图一底部的回复后,出现图二效果.软键盘弹出,上面显示出一个布局,包括输入框和功能按钮等. 先说下我的心路历程吧,原 ...

h5页面键盘弹出影响页面布局（兼容）

h5页面键盘弹出影响页面布局（兼容）相关推荐

最新文章

热门文章