在一些手机网站上填表单时,如果表单比较长,在点击控件打算输入文字时控件就被虚拟键盘挡住看不见了。用户还要去滚动页面才能看到控件,但虚拟键盘又会因此消失。当再次得到焦点时候可能又发生同样的情况。这是非常糟糕的用户体验,所以需要对其改进。
虚拟键盘的弹出只非常暴力的,它直接遮在页面上出现,不会改变页面尺寸,也不会触发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>
虚拟键盘挡住控件
时间: 2024-10-17 00:58:05