在iOS下fixed布局的输入框会乱跑

原创 amy_xiaozhu 随笔 MUI 372阅读 2017-12-25 11:10:00 举报

(目前的项目是用MUI框架做的)移动端的适配有时候挺折腾的,这次做项目时有个评论功能,输入框是固定在最底部,那么我就想当然的将该区域fixed到最底部,在android上测试时,软键盘弹起来时输入框都是和软键盘黏靠着显示在最底部
但是在iOS上可不会这么顺从了,当input focus时并且当该页内容超过一页时,输入框就到处乱飞了,飞到了中间位置,离软件软键盘那么大距离,而且当上下滑动时输入框还会跟着一起跑,fixed定位的元素跟着页面一起滚动,fixed属性失效了呢。
百度了一下,原来是iOS系统上如果软键盘被唤起,页面的fixed元素将失效(即无法定位,也可以理解为变成了absolute定位),所以当页面超过一屏且滚动时,失效的 fixed 元素就会跟随滚动了。这便是 iOS 上 fixed 元素和输入框的 bug 。其中不仅限于 type=text 的输入框,凡是软键盘(比如时间日期选择、select 选择等等)被唤起,都会遇到同样地问题。
那么我试了几种方案:
方案1:(http://yunkus.com/mobile-input-pop-keyboard-solution/
var footer = document.getElementById("footer");
var ftInput = document.getElementById("footer-input");
var mask = document.getElementById("mask");
var handleScroll = function(ev){
ev.preventDefault();
}
ftInput.onfocus = function(){
// 这两行就是关键代码
footer.style.position = "relative";
ftInput.scrollIntoView();
// 这两行就是关键代码 END
document.addEventListener("touchmove",handleScroll);
mask.style.display = "block";
}
ftInput.onblur = function(){
footer.style.position = "fixed";
mask.style.display = "none";
document.removeEventListener("touchmove",handleScroll);
}
mask.onclick = function(){
ftInput.blur();
mask.style.display = "none";
document.removeEventListener("touchmove",handleScroll);
}
方案1主要是 scrollIntoView(),将input滚动到可视区域,并且出现input输入框时,将页面设置成不可滚动,用户体验不是特别好

方案2:(https://www.w3cplus.com/mobile/mobile-fixed-layout.html
将头尾fixed,中间区域设置为absolute,
main {
/ main绝对定位,进行内部滚动 /
position: absolute;
top: xxpx; bottom: xxpx;
/ 使之可以滚动
/ overflow-y: scroll;
/ 增加该属性,可以增加弹性 /
-webkit-overflow-scrolling: touch;
}
方案2网上说有效,但是我这边试了下没有啥效果,所以我和方案1合并起来使用
但是总的来说都不是很好的用户体验,
最后一个方案,是同事的功劳,
方案3:因为框架用的MUI,所以结合方案2的布局,然后在你的plus里面添加一个样式设置该Activity总是调整屏幕的大小以便留出软键盘的空间:
plus.webview.currentWebview().setStyle({
softinputMode: "adjustResize"
});
这样就可以很完美的解决了。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复