由于安卓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. Qt之log数据展示模块简要实现

    Log模块主要用于实时测井数据的显示和测后曲线数据的预览和打印,为更好的展示对Qt中相关知识点的应用,特以Log模块为例对其进行简要实现. 内容导图: 一.功能需求 1.界面效果图 Log模块实现曲线 ...

  2. 构建基于虚拟用户的vsftpd服务器

    安装: [root@server ~]# yum install -y vsftpd [root@server ~]# rpm -ql vsftpd /etc/logrotate.d/vsftpd / ...

  3. 杂项-QRCode:ZXing

    ylbtech-杂项-QRCode:ZXing 1.返回顶部 1. ZXing是一个开放源码的,用Java实现的多种格式的1D/2D条码图像处理库,它包含了联系到其他语言的端口.Zxing可以实现使用 ...

  4. Camera Vision - video surveillance on C#

    转自:http://blog.csdn.net/xyz_lmn/article/details/6072897 http://www.codeproject.com/KB/audio-video/ca ...

  5. java的动态代理原理

    之前虽然会用JDK的动态代理,但是有些问题却一直没有搞明白.比如说:InvocationHandler的invoke方法是由谁来调用的,代理对象是怎么生成的,直到前几个星期才把这些问题全部搞明白了.  ...

  6. 一次ssh被植入后门的经历及解决方案

    昨天发现服务器上面很多程序被挂马了,跟开发一起处理了挂马文件,今早发现游戏后台又打不开了,上服务器发现后台程序的入口文件都被删了,恢复了index.php.admin.php后才能正常访问,晚上谁也没 ...

  7. 性能测试之Jmeter学习(八)

    本节主要学习:断言 JMeter也有像LR中的检查点,本节就来介绍下JMeter的检查点如何去实现. JMeter里面的检查点通过添加断言来完成. 检查点:上一节讲到,我们对用户名和密码进行了参数化, ...

  8. prototype for '类名::函数名'does not match any in class'类名'

    函数声明和定义参数类型必须相同. 前置声明一定要放到名称空间内,代表该名称空间内的类.

  9. php封装pdo操作数据的工具类

    <?php header("Content-Type:text/html;charset=utf-8"); class PdoMysql{ public static $co ...

  10. HDU - 6113 2017百度之星初赛A 度度熊的01世界

    度度熊的01世界  Accepts: 967  Submissions: 3064  Time Limit: 2000/1000 MS (Java/Others)  Memory Limit: 327 ...