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

 

遺留問題：

還沒仔細研究過軟鍵盤彈起是如何影響水平位置不能居中的，有時間再研究。有研究過的朋友歡迎留言。