• 输入框VS软键盘


    最近在做一个h5的时候遇到的问题

    我们都知道当页面上的有输入框被选中了,这个时候就回调出键盘用户可以输入。但是安卓手机在弹出键盘时页面的输入框也会被覆盖住;

    以下为暂时的解决办法:(以下方法同时解决了ois当失去焦点时,页面高度不能重置的问题

    解决思路:首先判断是机型----》强制将输入框显示到页面的可视区域内scrollIntoViewIfNeeded()相当于scrollIntoViewIfNeeded(true)

    var u = navigator.userAgent.toLowerCase();

    var isARD = u.indexOf('android') > -1 || u.indexOf('adr') > -1;

    var isResize

    //输入框
    $("#inp_name,#inp_res").on("focus",function(e)
    {
      isResize=false;
    })
    $("#inp_name,#inp_res").on("blur",function(e)
    {
      window.scrollTo(0,0);
      isResize=true;
      resizeF()
    })


    if(isARD)
    {
      var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
      window.addEventListener("resize", function()
      {
        if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA")
        {
          window.setTimeout(function()
          {
            document.activeElement.scrollIntoViewIfNeeded();
            //document.activeElement.scrollIntoView();
          },0);
        }

        var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        if (clientHeight > nowClientHeight) {/*键盘弹出的事件处理*/}
        else {/*键盘收起的事件处理8*/$("#inp_name,#inp_res").blur(); }
      })
    }

    function resizeF()
    {
      setTimeout(function()
      {
        if(!isResize){return}
        ww=$(window).width();hh=$(window).height();
        //----------
        $("#wrap").css({"top":(hh-defaultH)*.5});  
        window.scroll(0,0);
      },100)
    }

  • 相关阅读:
    2010年7月29日_周四_Working with CallbackResults
    2010年7月19日_周一_Using the Common Data Source API in a Web application
    2010年7月20日_周二_Accessing ArcGIS Server from a Web application
    Flex代码自动换行(自动格式化)
    2010年7月21日_周三_Developing a scriptable Web ADF control
    2010年7月30日_周五_ASP.NET callback solution
    2010年8月02日_周一_map control
    SDE数据库的异地部署
    2010年7月27日_周二_introduction_to_web_controls
    ICE在VC中的配置
  • 原文地址:https://www.cnblogs.com/Ella2018/p/10551863.html
Copyright © 2020-2023  润新知