由于安卓app内嵌入H5页面,webview对于软键盘没有处理(如果不是产品强烈要求建议不要处理这种拆东墙补西墙的问题,因为其他的手机上可能会出现已经优化软键盘的情况)

1.input下方还有多余空位能够提供滚动

那么只需要一句代码就可以处理

setTimeout(function(){
if('scrollIntoView' in document.activeElement) {
document.activeElement.scrollIntoView();
} else {
document.activeElement.scrollIntoViewIfNeeded();
}
},400);

2.input下方没有多余空间给页面滚动到可是区域了(也就是说input在页面最下面并且不是浮动的)

那么我们需要手动插入空白让页面有足够的空间进行1中的滚动

append进去的元素要比scrollIntoView先执行否则不生效(最好有定时器)

下面是完整代码:

var isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Linux') > -1;
if (isAndroid) {
//软键盘处理,建议不要处理
var isredundant = false;
$('.r-email,.r-code').on('blur', function(){//r-email和r-code是在最底下要处理的input元素
setTimeout(function(){//做定时器是为了要让focus触发后再判断占位元素状态再执行
if (isredundant) {
isredundant = false;
}else{
$('.redundant_div').css('display','none');
isredundant = false;
}
}, 100)
})
$('input[type="text"],textarea').on('focus', function () {
if ($(this).attr('class') == 'r-email' || $(this).attr('class') == 'r-code') {
if ($('.redundant_div').length > 0) {//如果之前是已经有插入的占位元素的,那么给出标识,让blur的时候不隐藏占位元素
if ($('.redundant_div').css('display') != 'none') {//如果占位元素在就给状态
isredundant = true;
}
setTimeout(function(){//这里的定时器要比blur的长否则一直是隐藏的
$('.redundant_div').css('display','block')
},150)
}else{
$('.personal-data').append('<div class="redundant_div" style="width: 100%;height: 200px;"></div>')
setTimeout(function(){
$('.redundant_div').css('display','block')
},150)
}
}
setTimeout(function(){
// if (target.scrollIntoViewIfNeeded) {
// target.scrollIntoViewIfNeeded();
// } if('scrollIntoView' in document.activeElement) {
document.activeElement.scrollIntoView();
} else {
document.activeElement.scrollIntoViewIfNeeded();
}
},400);
});
}

安卓H5软键盘遮挡输入框的更多相关文章

  1. h5软键盘挡住输入框问题解决(android)

    问题 移动端浏览器中的表单在部分android机型上测试,点击靠下的输入框时会遇到弹出的软键盘挡住输入框问题 ios可自身弹起(ios自身的调整偶尔也会出问题,例如第三方键盘会遮挡,原因是第三方输入法 ...

  2. html5手机网页开发,中文输入法下软键盘遮挡输入框

    安卓手机解决办法 微信UI框架weui中给出了解决方法:weui框架http://weui.github.io/weui/example.js // .container 设置了 overflow 属 ...

  3. Android软键盘遮挡的四种解决方案

    问题概述 在编辑框输入内容时会弹出软键盘,而手机屏幕区域有限往往会遮住输入界面,我们先看一下问题效果图: 输入用户名和密码时,系统会弹出键盘,造成系统键盘会挡住文本框的问题,如图所示: 输入密码时输入 ...

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

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

  5. js防止安卓手机软键盘弹出挤压页面导致变形的方法

    5防止安卓手机软键盘弹出挤压页面导致变形的方法 输入框定位在底部,手机端打开,输入框聚焦后软键盘打开为什么会瞬间自动关闭呢? 先看看问题: 1.原来是这样的: 2.在苹果手机里面是正常的: 3.到了安 ...

  6. Android软键盘遮挡布局问题;

    布局被软键盘遮挡虽然不是什么大问题,但还是比较影响用户体验的:最让人恼火的是当前输入框被软键盘被遮挡,来看一下解决方法: 1.当前输入框被软键盘遮挡,仅把输入框显示出来,不改变整体布局: 设置Mani ...

  7. Android软键盘与输入框的设置

    大家开发Android或者用app的时候会发现转到输入框就会自动弹出软键盘,切换别的页面就会自动的隐藏,下面几行代码用的熟练了就行了: 1.方法一(如果输入法在窗口上已经显示,则隐藏,反之则显示) I ...

  8. iOS键盘遮挡输入框,输入区域自动上移

    在iOS开发过程当中,遇到关于键盘遮挡输入框的问题,经过网络参考与实践,总结如下: 登录窗口,上下放置两个UITextField,一个用户名,一个密码,放置的在屏幕下方1/3处,当点击用户名时,自动弹 ...

  9. AppCompatActivity 去掉标题栏和EditText弹出软键盘遮住输入框问题

    1. AppCompatActivity去掉标题栏 此处除掉标题栏,需要注意一点,AppCompactActivity是继承自Activity.然而,AppCompactActivity据查看网上资料 ...

随机推荐

  1. 【Lintcode】028.Search a 2D Matrix

    题目: Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the f ...

  2. VirtualBox文件系统已满--磁盘扩容

    第1步:为virtualbox虚拟电脑扩容 进入命令行,以Windows系统为例 (特别注意空格和中文) 1.启动CMD命令行,进入VirtualBox的安装目录.如 运行:cmd C:\Users\ ...

  3. bzoj 4032 [ HEOI 2015 ] 最短不公共子串 —— 后缀自动机+序列自动机

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4032 序列自动机其实就是每个位置记录一下某字母后面第一个出现位置,为了子序列能尽量长. 对字 ...

  4. 微信小程序 加载 HTML 标签

    肯定有小伙伴遇到过这个问题:加载的数据是一堆HTML 标签这就尴尬了,因为小程序没有提供 webview 来加载这些 HTML.但是不用慌,小程序不提供我们可以自己造个新轮子,自己造不出新轮子咱们找到 ...

  5. qt 安装编译

    项目编译的时候提示 cannot find -lGL sudo apt-get install libgl1-mesa-dev

  6. JS---分解质因数

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. TCP 连接的握手信息详解

    建立TCP需要三次握手才能建立,而断开连接则需要四次握手.整个过程如下图所示: 先来看看如何建立连接的. 首先Client端发送连接请求报文,Server段接受连接后回复ACK报文,并为这次连接分配资 ...

  8. Biopython常用功能模块

    Biopython项目是旨在减少计算生物学中代码重复的开源项目之一,由国际开发人员协会创建. 它包含表示生物序列和序列注释的类,并且能够读取和写入各种文件格式(FASTA,FASTQ,GenBank和 ...

  9. day4 函数重载

    函数的重载 1.函数重载的定义:在同一个类中,有一个以上的同名函数,只要函数的参数列表或参数类型不一样即可,与返回值无关, 这些统称为方法的重载. 2.函数的重载存在的原因:为了增强方法的阅读性,优化 ...

  10. UniqueIdentifier 数据类型

    UniqueIdentifier 数据类型用于存储GUID的值,占用16Byte. SQL Server将UniqueIdentifier存储为16字节的二进制数值,Binary(16),按照特定的格 ...