解决Hello MUI聊天窗口在iOS平台上，输入框获取焦点时位置错乱的bug

lb786984530 · Dec 8, 2017 · b422b3b · b422b3b
1 parent ad130a7
commit b422b3b
Showing 1 changed file with 19 additions and 5 deletions.
diff --git a/examples/hello-mui/examples/im-chat.html b/examples/hello-mui/examples/im-chat.html
@@ -366,7 +366,21 @@ <h1 class="mui-title">chat (聊天窗口)</h1>
 					}
 				});
 				template.config('escape', false);
-				//$.plusReady=function(fn){fn();};
+
+				if(mui.os.ios){
+					// 解决在ios上fixed元素focusin时位置出现错误的问题 
+					document.addEventListener('DOMContentLoaded',function(){
+						var footerDom = document.querySelector('footer');
+
+						document.addEventListener('focusin', function() {
+							footerDom.style.position = 'absolute';
+						});
+						document.addEventListener('focusout', function() {
+							footerDom.style.position = 'fixed';
+						});
+					});
+				}
+
 				$.plusReady(function() {
 					plus.webview.currentWebview().setStyle({
 						softinputMode: "adjustResize"
@@ -683,10 +697,10 @@ <h1 class="mui-title">chat (聊天窗口)</h1>
 						event.detail.gesture.preventDefault();
 					}, false);
 					//点击消息列表，关闭键盘
-					ui.areaMsgList.addEventListener('click',function (event) {
-						if(!focus){
-							ui.boxMsgText.blur();
-						}
+					ui.areaMsgList.addEventListener('click',function (event) {
+						if(!focus){
+							ui.boxMsgText.blur();
+						}
 					})
 
 				});