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>

  • 相关阅读:
    TCL环境检查
    POI之Excel文档增删改查
    wireshark自动化之tshark命令行
    selenium-webdriver
    ruby自动化之selenium webGUI
    TCL自动化之SSH交互式
    链表的操作
    参考网址
    RTC定时开机闹钟
    中断
  • 原文地址:https://www.cnblogs.com/axl234/p/3897477.html
Copyright © 2011-2022 走看看