由于安卓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. [转]从onload和DOMContentLoaded谈起

    这篇文章是对这一两年内几篇dom ready文章的汇总(文章的最后会标注参考文章),因为浏览器进化的关系,可能他们现在的行为与本文所谈到的一些行为不相符.我也并没有一一去验证,所以本文仅供参考,在具体 ...

  2. 响应式web设计,html5和css3实战(@author Ben Fraim)

    重定向 //请求重定向简化写法 response.sendRedirect("/day09/adv.html"); 转发 request.getRequestDispatcher( ...

  3. ELK安装配置简单使用

    ELK是三款软件的总称,包括了elasticsearch.logstash.kibana,其实在生产使用中,我们还需要使用到其他的更多辅助软件来更好更合理的收集展示数据. Elasticsearch: ...

  4. caffe solver

    caffe solver https://groups.google.com/forum/#!topic/caffe-users/mUIi42aKWHQ https://github.com/BVLC ...

  5. Linux&nbsp;JDK1.4卸载与1.6的安装

    Linux JDK卸载与安装 一.jdk1.4卸载 Redhat Enterprise 5 中自带安装了jdk1.4,在安装jdk1.6前,把jdk1.4卸载: 1.首先查看系统自带JDK的版本: [ ...

  6. POJ 2311 Cutting Game (博弈)

    题意:给定一个长方形纸张,每次只能水平或者垂直切,如果切到1*1的方格就胜,问先手胜还是负. 析:根据Nim游戏可知,我们可以分别求出每个子游戏的和,就是答案,所以我们就枚举每一种切法,然后求出SG函 ...

  7. LightOJ - 1234 LightOJ - 1245 Harmonic Number(欧拉系数+调和级数)

    Harmonic Number In mathematics, the nth harmonic number is the sum of the reciprocals of the first n ...

  8. sqlserver2012——EXISTS关键字

    1.返回TRUE或者FALSE 如果exists查询存在,则能查询出来 select a.* From 成绩信息 a ’) 2.判断用户登录 ) ) ' set @pwd='xxxxxxx' if e ...

  9. PCANet: A Simple Deep Learning Baseline for Image Classification?----中文翻译

    一 摘要 在本文中,我们提出了一个非常简单的图像分类深度学习框架,它主要依赖几个基本的数据处理方法:1)级联主成分分析(PCA);2)二值化哈希编码;3)分块直方图.在所提出的框架中,首先通过PCA方 ...

  10. qemu编译

    符号说明 $ 表示在用户模式下执行命令 # 表示在root模式下执行命令 ### 表示注释用于解释接下来一条命令的作用 更新环境源 设置阿里源 $ sudo mv /etc/yum.repos.d/C ...