由于安卓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. python下setuptools安装

      python下的setuptools带有一个easy_install的工具,在安装python的每三方模块.工具时很有用,也很方便.安装setuptools前先安装pip,请参见<pytho ...

  2. BZOJ1251 序列终结者(Splay平衡树)(占位)

    网上有许多题,就是给定一个序列,要你支持几种操作:A.B.C.D.一看另一道题,又是一个序列 要支持几种操作:D.C.B.A.尤其是我们这里的某人,出模拟试题,居然还出了一道这样的,真是没技术含量…… ...

  3. ACM学习历程——UVA11111 Generalized Matrioshkas(栈)

    Description   Problem B - Generalized Matrioshkas   Problem B - Generalized Matrioshkas  Vladimir wo ...

  4. bzoj 1369: Gem 树形dp

    题目大意 给出一棵树,要求你为树上的结点标上权值,权值可以是任意的正整数 唯一的限制条件是相临的两个结点不能标上相同的权值,要求一种方案,使得整棵树的总价值最小.N<=10000 题解 我们可以 ...

  5. python爬虫知识点总结(四)Requests库的基本使用

    官方文档:http://docs.python-requests.org/en/master 安装方法 命令行下输入:pip3 install requests.详见:https://www.cnbl ...

  6. TTY,Console以及Terminal

    TTY可以理解是一种终端显示.可以在/dev文件夹看到多个tty开头的文件,可以通过alt+Fn(n=1~6)来进行切换.这个是不是和GUI场景下的多个Terminal窗口是一致的呢? 伪TTY是指一 ...

  7. Behave + Selenium(Python) 四

    来自T先生 今天我们开始讲讲behave的厉害的地方. Tag文件的使用 在behave里面,如何来控制哪些case需要run,哪些case不需要run,这个时候就用Tag来控制.好了,接下来我用Ta ...

  8. bzoj5093

    NTT+组合数学 $把每个点分别按度数考虑,由于有标号,可以得出$ $ans=n*2^{(n-1)*(n-2)}*\sum_{i=1}^{n-1}{C(n-1,i)*i^{k}}$ $本质上是求\su ...

  9. 运用flask、flask-restful开发rest风格的接口,并使用蓝图增加代码的延展性和可扩展性。

    本人做为一个测试人员,之前也有写过,想要测试好接口,那必须要知道如何开发一个接口的重要性. 之前也写过通flask或者flask-retful开发接口,但那些只是一些最简单的demo,不具有很好延展性 ...

  10. 【机器学习】随机森林RF

    随机森林(RF, RandomForest)包含多个决策树的分类器,并且其输出的类别是由个别树输出的类别的众数而定.通过自助法(boot-strap)重采样技术,不断生成训练样本和测试样本,由训练样本 ...