最近在做一个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. python day1 之三级菜单的正确姿势

    看了几个同学有关三级菜单的实现,都是通过一级一级输出,是较为过程的实现.另外如果菜单(树形结构)更多级这样处理起来就比较麻烦了. 可以使用python强大的列表和字典,实现的更优美或简洁一些: 注:复 ...

  2. 1.2 JAVA多线程实现

    线程和进程 进程:是执行中一段程序, 进程是系统进行资源分配和调度的一个独立单位. 线程:比进程更小的能独立运行的基本单位,单个进程中执行中每个任务就是一个线程.线程是进程中执行运算的最小单位. Th ...

  3. 活代码LINQ——09

    一.代码 ' Fig. 9.7: LINQWithListCollection.vb ' LINQ to Objects using a List(Of String). Module LINQWit ...

  4. vmware安装CentOS开发环境搭建

    CentOS开发环境搭建 一.安装系统 新建虚拟机   2.选择“自定义(高级)”,并点击[下一步] 3.选择虚拟机硬件兼容性,并点击[下一步] 4.选择“稍后安装操作系统”,并点击[下一步] 5.选 ...

  5. SVG路径path的贝塞尔曲线指令

    深度好文分享: http://www.zhangxinxu.com/wordpress/2014/06/deep-understand-svg-path-bezier-curves-command/ ...

  6. 如何在linux环境上挂载磁盘

    1.1      fdisk -l 命令 查看可用的磁盘信息(如果没有显示可用的磁盘,可重启一下主机:reboot) 1.2      df –h 命令 可查看已挂的磁盘情况 1.3      pvs ...

  7. 剑指offer第32题:把数组排成最小的数及关于list.sort()和sorted( Iterable object )函数的相关知识

     * 解题思路:  * 先将整型数组转换成字符数组,然后将String数组排序,最后将排好序的字符串数组拼接出来.关键就是制定比较规则.  * 排序规则如下:  * 若ab > ba 则 a & ...

  8. win10安装pytorch

    安装gpu版本的pytorch需要三个东西:pytorch(torchvision).cuda.cudnn 相信大家都安装过了anaconda,就不介绍anaconda的安装了 1.安装cuda:从官 ...

  9. react native获取组件高度,宽 度等

    import React,{Component} from 'react'import { View, Text, Image, StyleSheet, TouchableHighlight, Tou ...

  10. Shell bash 数学运算 bc

    1.bc命令可以完成浮点数的运算.其中 scale可以指定保留的小数点位数. 2.举例 例1: 例2: