360浏览器文本框获得焦点后被android软键盘遮罩该怎么办
场景是这样的，站点上筛选按钮点击后弹出层（fixed），当输入框获取焦点以后弹出系统自带的软键盘，在android上十款浏览器挨个测试比对，发现在360浏览器弹出键盘以后获取焦点的文本框被软键盘覆盖了。
截图如下
（未获取软键盘焦点的情况）
（chrome浏览器调起软键盘的情况）
（360浏览器调起软键盘情况）
那么问题来了，浏览器的软键盘显示出来又哪几种情况呢？英文 中文（网上找的）
经过简单的了解，大概分析了一下软键盘在浏览器上弹出应该包含软键盘占用主activity空间，让主activity重新布局 和 不调整窗口大小浮在上面 这两种方式（哈哈这是我yy的）
360应该是使用后者，其他的也许是使用前者。
既然问题出现了，那就要想办法解决，于是经过简单的推敲，基本上可以得出（存在不占用主窗口空间的软键盘技术） 1、当input获取焦点的时候，2、软键盘会弹出，3、fixed的层需要向上移动一下，4、成功输入；5、当input blur或是键盘点击回车以后,fixed还原位置（这里要庆幸360没有默认带旋转屏幕跟随转动，不然还要麻烦一点）
既然分析完毕就要写代码了
1.添加识别浏览器代码
var isSpecialBrowser = navigator.userAgent.match(/360 Aphone.*\(([\d.]+)\)$/i)//360等部分软键盘采用的是软键盘不占用主窗口空间造成，吸底的 input获取焦点的时候被遮罩
2.处理事件
$(document)
.on('keydown keyup', Element,function(ev) {
if(code == && isSpecialBrowser) {
DOM.css('bottom', -);
}
}
})
.on('focus', Element,function() {
if(isSpecialBrowser) {
DOM.css('bottom', -);
}
})
.on('blur', Element,function() {
if(isSpecialBrowser) {
DOM.css('bottom', -);
}
});
好了，问题解决了
但是会又问题，就是主动点击键盘收起按钮时没办法获取任何keycode和对应的事件，因此这里会有问题。
文本框获得焦点、失去焦点调用JavaScript
代码如下:
<%@ Page Language="VB" CodeFile="focus.aspx.vb" Inherits="focus" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script language="javascript">
function text1_onmouseover(it)
{
it.focus();
it.select();
it.style.backgroundColor="red";
}
function text1_onmouseout(it)
{
it.onblur;
it.style.backgroundColor="white";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" onmouseover="return text1_onmouseover(this);" onblur="text1_onmouseout(this)" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
相关文章
这篇文章主要为大家详细介绍了Android画板开发之橡皮擦功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
这篇文章主要介绍了Android全局获取Context实例详解的相关资料,需要的朋友可以参考下2017-06-06
今天小编就为大家分享一篇关于Android面试题问答整理，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2018-12-12
这篇文章给大家讲解了在Android手机上使用adb wireless进行调试的步骤以及问题解决办法，有需要的跟着学习下吧。2017-12-12
Android中的Retrofit+OkHttp+RxJava缓存架构使用
Retrofit和OkHttp API以及JVM扩展RxJava都是开源项目,大家可以轻松在GitHub上找到,下载和基本配置部分这里我们不作重点,主要还是来看一下Android中的Retrofit+OkHttp+RxJava缓存架构使用:2016-06-06
这篇文章主要为大家介绍了Android WebView输入框被档问题升级解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
在安卓平台上实现一下Metro菜单效果，之前有介绍过了，相信大家对此不会陌生了吧，感兴趣的朋友可以了解下哈2013-06-06
android ContentResolver获取手机电话号码和短信内容
这篇文章主要为大家详细介绍了android ContentResolver获取手机电话号码、短信内容，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了Android编程实现定时发短信功能,结合实例形式较为详细的分析了Android定时发送短信功能的相关原理、实现方法与注意事项,需要的朋友可以参考下2017-09-09
这篇文章主要介绍了android 震动和提示音的实现代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
最新评论