zoukankan      html  css  js  c++  java
  • 输入框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)
    }

  • 相关阅读:
    mysql dns反说明的成绩
    Solaris 11 安装图解(1)
    Meld 1.1.5
    Open Movie Editor-视频编纂器
    Solaris 11 装配图解(6)
    Pidgin 2.0.2
    Subversion 1.4.4 发布
    Solaris 11 安装图解(5)
    Solaris 11 安置图解(3)
    HTML 实体盘诘东西
  • 原文地址:https://www.cnblogs.com/Ella2018/p/10551863.html
Copyright © 2011-2022 走看看