360浏览器文本框获得焦点后被android软键盘遮罩该怎么办

所属分类: 软件编程 / Android 阅读数: 1442
收藏 0 赞 0 分享

场景是这样的,站点上筛选按钮点击后弹出层(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 HapticFeedback(震动反馈)

下面小编就为大家带来一篇老生常谈Android HapticFeedback(震动反馈)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详谈OnTouchListener与OnGestureListener的区别

下面小编就为大家带来一篇详谈OnTouchListener与OnGestureListener的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Android仿知乎悬浮功能按钮FloatingActionButton效果

前段时间在看属性动画,恰巧这个按钮的效果可以用属性动画实现,下面通过本文给大家分享adroid仿知乎悬浮功能按钮FloatingActionButton效果,需要的朋友参考下吧
收藏 0 赞 0 分享

解决Android V7后自定义Toolbar、ActionBar左侧有空白问题

这篇文章主要介绍的Android V7后自定义Toolbar、ActionBar左侧有空白问题的解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

Android常见控件使用详解

这篇文章主要为大家详细介绍了Android常见控件的使用方法,包括ProgressBar进度条控件、AlertDialog对话框控件等,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Android实现简洁的APP更新dialog数字进度条

这篇文章主要为大家详细介绍了Android实现简洁的APP更新dialog数字进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Android 判断当前语言环境是否是中文环境

本文主要介绍了Android 判断当前语言环境是否是中文环境的方法。具有很好的参考价值。下面跟着小编一起来看下吧
收藏 0 赞 0 分享

详谈Android中Matrix的set、pre、post的区别

下面小编就为大家带来一篇详谈Android中Matrix的set、pre、post的区别。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Android实现登录界面记住密码的存储

这篇文章主要为大家详细介绍了Android SharedPreferrences实现登录界面记住密码的存储,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Android 使用SharedPreferrences储存密码登录界面记住密码功能

Android存储方式有很多种,在这里所用的存储方式是SharedPreferrences, 其采用了Map数据结构来存储数据,以键值的方式存储,可以简单的读取与写入,下面通过实例代码给大家讲解下,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多