MUI 當input聚焦之后，彈出自帶的鍵盤之后，內容往上移動

1）有時候為了用戶更好的體驗，當input聚焦之后，手機自帶的鍵盤彈出的時候，頁面的內容也要跟着滾動，好讓鍵盤不遮住input

　　只要把input標簽放到mui-content這個類里面就可以了

<div class="mui-content">
　　　　<input />
</div>

 

2） 但是把input標簽放入mui-scroll就不行了。

<div class="mui-content">
　　　　<div class="mui-scroll-wrapper">
　　　　　　<div class="mui-scroll">
　　　　　　　　<input />
　　　　　　</div>
　　　　</div>
</div>

 

---

更新解決辦法：

 scroll區域滾動是用div來模擬的，自己也有滾動的方法與監聽滾動距離的辦法。那么當input被遮擋住之后，我可以強行讓scroll滾動鍵盤高度的距離。這樣就能解決遮擋了。

$("#focus").focus(function(){
    mui('.mui-scroll-wrapper').scroll().scrollTo(0,y,100);
})

 

在我寫的例子中，input滾動到屏幕底部，就是剛好不遮住input的位置的值為-1545，假設鍵盤高度為400，那么上面的y值就是 -（1545+400）即-1945。

最終結果：

如果input后面最多只有幾十px的距離會不會影響失去焦點后整個頁面的位置？經過測試是不會的。

如果想input失去焦點之后回到原來獲取焦點的位置，那么可以保存最開始聚焦位置的值，blur的時候再讓頁面滾動到原來的位置就行了。

監聽滾動距離的方法：

jq：

var scroll = mui('.mui-scroll-wrapper').scroll();
$('.mui-scroll-wrapper' ).on('scroll', function (e ) {
      console.log(scroll.y);
})

js：

var scroll = mui('.mui-scroll-wrapper').scroll();
document.querySelector('.mui-scroll-wrapper' ).addEventListener('scroll', function (e ) {
      console.log(scroll.y);
})

 

或者是這一種方法：

window.onresize=function(){
    document.activeElement.scrollIntoView(false);    
}

activeElement表示獲得焦點的元素，scrollIntoView()，里面的參數是true或者省略的時候就是讓該元素頂端對齊，false的時候是底端對齊，。scrollIntoView()也可以換成scrollIntoViewIfNeeded（）。

上面這兩種方式不知道在ios的效果如何，沒測試過。