虛擬鍵盤擋住控制項

標籤：style   color   io   for   ar   cti   size   res   

在一些手機網站上填表單時，如果表單比較長，在點擊控制項打算輸入文字時控制項就被虛擬鍵盤擋住看不見了。使用者還要去滾動頁面才能看到控制項，但虛擬鍵盤又會因此消失。當再次得到焦點時候可能又發生同樣的情況。這是非常糟糕的使用者體驗，所以需要對其改進。
　　虛擬鍵盤的彈出只非常暴力的，它直接遮在頁面上出現，不會改變頁面尺寸，也不會觸發resize事件。而且這是系統級的東西，程式無法對其做進一步的控制，甚至無法擷取到虛擬鍵盤的高度。
　　但好在虛擬鍵盤通常從下方出現，所以對於頁面上較長的表單，在控制項得到焦點後應該將頁面做適當的滾動，讓目標控制項處於頂部的位置，這樣就能保證控制項在虛擬鍵盤彈出後依然對使用者可見了。大概就是這種感覺：
運行A：<input/><br/>
B：<input/><br/>
C：<input/><br/>
D：<input/><br/>
E：<input/><br/>
F：<input/><br/>
G：<input/><br/>
H：<input/><br/>
I：<input/><br/>
<script>
document.body.style.paddingBottom=document.body.offsetHeight+"px";
var s=document.getElementsByTagName("input");
for(var i=0;i<s.length;i++)
  s[i].onfocus=function(e){
    var t=this.offsetTop;
    document.body.scrollTop=t-4;
  };
</script>