Android弹窗输入框获取焦点,360浏览器文本框获得焦点后被android软键盘遮罩该怎么办...

场景是这样的,站点上筛选按钮点击后弹出层(fixed),当输入框获取焦点以后弹出系统自带的软键盘,在android上十款浏览器挨个测试比对,发现在360浏览器弹出键盘以后获取焦点的文本框被软键盘覆盖了。

截图如下

c3dfc0324cfec3d32edb225f8240de69.png

a50ada84501ad87da21a77a4384f9cbe.png

44c45a0c3245db4d2b8f2819710a3bc9.png

(未获取软键盘焦点的情况)

(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

代码如下:

无标题页

function text1_onmouseover(it)

{

it.focus();

it.select();

it.style.backgroundColor="red";

}

function text1_onmouseout(it)

{

it.onblur;

it.style.backgroundColor="white";

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值