Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

虚拟键盘挡住控件

  在一些手机网站上填表单时,如果表单比较长,在点击控件打算输入文字时控件就被虚拟键盘挡住看不见了。用户还要去滚动页面才能看到控件,但虚拟键盘又会因此消失。当再次得到焦点时候可能又发生同样的情况。这是非常糟糕的用户体验,所以需要对其改进。
  虚拟键盘的弹出只非常暴力的,它直接遮在页面上出现,不会改变页面尺寸,也不会触发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>
  但这里只是非常简易的代码,实际的位置计算可能比这复杂许多。暂时也没找到其它更好的办法解决虚拟键盘挡住页面控件的问题了。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^