5+ App上ios版本mui.prompt在输入框弹起时

场景

 

平台：

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%';
					}
				});
			});

 

遗留问题：

还没仔细研究过软键盘弹起是如何影响水平位置不能居中的，有时间再研究。有研究过的朋友欢迎留言。