最近在做一个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)
}

输入框VS软键盘的更多相关文章

  1. ios移动输入框被软键盘遮挡

    页面输入框会出现被软键盘挡住的问题: 解决方法:获取input点击事件设置body高度 $('input').bind('click',function(e){ var $this = $(this) ...

  2. Android设置输入框和软键盘动态悬浮

    <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=&q ...

  3. flutter TextField 输入框被软键盘挡住的解决方案

    以前搞ionic1~4的开发中 和react-native   flutter中的机制完全不同, 在flutter 中 当前页面如果存在元素被软键盘挡住 的情况 页面元素的最外层肯定得嵌套一层   S ...

  4. IOS和安卓WEB页面,input输入框被软键盘遮挡解决方法

    本来以为这问题就只有ios才有,身边也没有android机测试,网上一搜,貌似有这个问题的还不少.最后把各种解决方法试了一边,貌似没什么用. 最后是这样解决的: setInterval(functio ...

  5. KeyboardUtil【软键盘弹出后输入框上移一定的高度】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 演示获取软键盘高度并保存,然后根据输入框的原有位置是否被软键盘挡住了,如果被挡住了则将整体页面上移一定的高度,当软键盘隐藏的时候再下 ...

  6. 点击底部input输入框,弹出的软键盘挡住input(苹果手机使用第三方输入法 )

    测试移动端页面的时候,偶然发现点击底部input输入框时,弹出的虚拟键盘偶尔会挡住input输入框. 输入框固定在页面底部,如图所示:   input固定底部设计图.png 点击底部input输入框唤 ...

  7. Android软键盘遮挡布局的那些事

    有朋友提到软键盘遮挡布局的问题,说网上找了很多资料都未能解决,下面我来总结一下那些事,有些内容也是从网友那里学来的,但是我都会自己验证正确了才会贴出来. 首先来分析下我们常见的遮挡问题有哪些(本次所说 ...

  8. 【移动开发】 Android隐藏输入法软键盘的一些说明

    刚刚在写一个仿微信的Android聊天软件,在编写的过程中,发现一个严重的BUG---当用户点击输入框用软键盘输入文本的时候点击了"返回好友列表"的按钮,返回到好友列表时软键盘无法 ...

  9. H5软键盘兼容方案

    前言 最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上.需求很明确,看似很简单,其实不然.从实验过一些机型上看,发现主要存在以下问题: ...

随机推荐

  1. Delphi 带星期几的日期格式化

    把日期按日期+星期几的格式输出 方法1:DatetoStr + DayOfWeek计算 ,这种办法灵活,但计算量大,不再祥叙. 方法2:FormatDateTime 具体代码如下://这里需要用For ...

  2. c++重要知识点

    C++重要知识点精华总结 cin的使用: 1>cin>>a;键盘读入数据赋值给a; 1>程序的输入都建有一个缓冲区,即输入缓冲区.一次输入过程是这样的,当一次键盘输入结束时会将 ...

  3. 强大的金融类图表库 TradingView 使用分享

    这段时间刚好做币圈交易所,运用到了现在最火的金融类图表库 -- TradingView ,就是强大,基本上现在的火币网(https://www.huobi.com),币安网(https://www.b ...

  4. bzoj1688

    题解: 暴力枚举生哪一些病 然后判断一下即可 代码: #include<bits/stdc++.h> using namespace std; ,D=; int d,k,n,a[N][D] ...

  5. Vue.directive添加全局指令详解

    自定义指令创建: Vue.directive( 'mycolor(指令名称:推荐全部小写,驼峰命名会出现问题,看最后面)' , { bind:function(){}, //本例只介绍inserted ...

  6. 【基于微信小程序的社区电商平台】需求分析心得——小豆芽

    一.项目内容 基于微信小程序,做一个社区电商平台,抓住社区电商的特点,做出特色,与微信集成,实现商品的个性化发布,以及个性化营销. 个性化发布:用户可以在应用上直接发布自己的商品,通过搜索心愿单可以查 ...

  7. 为什么Vuex内数据改变了而组件没有进行更新?

    这两天在进行一个首页的制作,结果就碰到了标题上所述的问题了,用了一天的时间在网上查资料.终于找出了问题所在 Vuex的数据写在store里,在组件中需要用到this.$store.commit() 来 ...

  8. 列举至少3种Support包中提供的布局或工具

    android.support.v7.widget.CardView 继承自FrameLayout并实现了圆角和阴影效果,常用于ListView或RecyclerView中Item布局的根节点 示例代 ...

  9. 浅析构造函数,及public、private、protected、final、this、super关键字

    初学JAVA,感觉很多知识点不熟悉,看了好多遍教材,最终还是决定把它写下来,加深印象以便忘了的时候再过来复习一下.看上去字数可能比较多,其实内容很简明. 首先看this的用法: package tes ...

  10. ubuntu 谷歌浏览器打开时需要输入密码来解锁密码环

    问题: ubuntu14.04, 设置系统自动登陆账户,但每次开机打开 google chromium 浏览器,会要求输入一次密码,来解锁登录密钥环.很麻烦. 解锁登录密钥环:输入密码以解锁您的登录密 ...