场景
平台:
dcloud 5+ APP
问题点:
mui.prompt弹出输入框
问题描述:
ios版本,点击输入框,键盘弹起,弹出框的位置发生改变,垂直方向正常,水平方向弹出框只有一半显示在屏幕右侧。关闭键盘,弹出框能恢复到水平和垂直方向都居中的位置。
android版本无问题
原因分析:
mui-popup是通过以下样式来达到水平和垂直方向居中的
.mui-popup{
position:fixed;
width:270px;
-webkit-transition-duration: 1ms ;
transition-duration: 1ms;
-webkit-transform: translate3d(-50%,-50%,0) scale(1);
transform: translate3d(-50%,-50%,0) scale(1);
left:50% ;
top:50%;
}
正常情况下没有问题,键盘弹出时就出问题了
解决方案:
document.addEventListener('DOMContentLoaded',function(){
document.addEventListener('focusin',function(){
if(mui.os.ios){
var popup = document.querySelector('.mui-popup');
popup.style.left = '25%';
}
});
document.addEventListener('focusout',function(){
if(mui.os.ios){
var popup = document.querySelector('.mui-popup');
popup.style.left = '50%';
}
});
});
遗留问题:
还没仔细研究过软键盘弹起是如何影响水平位置不能居中的,有时间再研究。有研究过的朋友欢迎留言。