虚拟键盘挡住控件

标签：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>

虚拟键盘挡住控件,布布扣,bubuko.com

虚拟键盘挡住控件

标签：style   color   io   for   ar   cti   size   res   

原文地址：http://www.cnblogs.com/axl234/p/3897477.html