zoukankan      html  css  js  c++  java
  • 虚拟键盘挡住控件

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

  • 相关阅读:
    OpenStack Paste.ini详解(二)
    OpenStack Paste.ini详解(一)
    PDB调试python代码常用命令
    Devstack 安装OpenStack Pike版本(单机环境)
    Openstack Pycharm 的远程调试
    django Forbidden
    Python 常用命令
    OSI模型和TCP/IP协议族(一)
    ubuntu 下关闭MySql server
    安装ubuntu时的注意事项----个人小总结
  • 原文地址:https://www.cnblogs.com/axl234/p/3897477.html
Copyright © 2011-2022 走看看