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

  • 相关阅读:
    hdu1716排列2(stl:next_permutation+优先队列)
    iOS UIWebView 载入https 网站出现NSURLConnection/CFURLConnection HTTP load failed (kCFStreamErrorDomainSSL,
    C++学习笔记23,类内函数重载
    Java---16---多线程---死锁
    Ubuntu上的Hadoop安装教程
    SAP BAPI一览 史上最全
    python脚本从excel表到处数据,生成指定格式的文件
    hdu 4865 Peter's Hobby
    【VUE】100. vue踩坑集锦
    【VUE】2.搭建vue脚手架@vue/cli,新建第一个vue项目
  • 原文地址:https://www.cnblogs.com/Ella2018/p/10551863.html
Copyright © 2011-2022 走看看