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)
    }

  • 相关阅读:
    would clobber existing tag
    已成功与服务器建立连接,但是在登录前的握手期间发生错误。 (provider: TCP 提供程序, error: 0
    C#搭建简单的http服务器,访问静态资源
    使用iis反向代理
    WorkerServices部署为Windows服务
    mongo 操作数据库的方式
    odoo db_name 指定多个数据库
    odoo 如何设置字段变更跟踪
    odoo qweb 视图使用widget
    odoo 代码片段比较全的扩展
  • 原文地址:https://www.cnblogs.com/Ella2018/p/10551863.html
Copyright © 2011-2022 走看看