360浏览器文本框得到焦点后被软键盘遮罩的问题

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

 

                    

  (未获取软键盘焦点的状况)               (chrome浏览器调起软键盘的状况)            (360浏览器调起软键盘状况)css

 

      那么问题来了,浏览器的软键盘显示出来又哪几种状况呢?英文   中文(网上找的)html

      通过简单的了解,大概分析了一下软键盘在浏览器上弹出应该包含软键盘占用主activity空间,让主activity从新布局不调整窗口大小浮在上面  这两种方式(哈哈这是我yy的)java

360应该是使用后者,其余的也许是使用前者。android

 

既然问题出现了,那就要想办法解决,因而通过简单的推敲,基本上能够得出(存在不占用主窗口空间的软键盘技术) 一、当input获取焦点的时候,二、软键盘会弹出,三、fixed的层须要向上移动一下,四、成功输入;五、当input blur或是键盘点击回车之后,fixed还原位置(这里要庆幸360没有默认带旋转屏幕跟随转动,否则还要麻烦一点)chrome

 

既然分析完毕就要写代码了浏览器

 1.添加识别浏览器代码ide

var isSpecialBrowser = navigator.userAgent.match(/360 Aphone.*\(([\d.]+)\)$/i)//360等部分软键盘采用的是软键盘不占用主窗口空间形成,吸底的 input获取焦点的时候被遮罩

2.处理事件布局

$(document)
    .on('keydown keyup', Element,function(ev) {
            if(code == 13 && isSpecialBrowser) {
                    DOM.css('bottom', -310);
                }
            }
           
        })
        .on('focus', Element,function() {
            if(isSpecialBrowser) {
               DOM.css('bottom', -110);
            }
        })
        .on('blur', Element,function() {
            if(isSpecialBrowser) {
                DOM.css('bottom', -310);
            }
        });

  

好了,问题解决了测试

可是会又问题,就是主动点击键盘收起按钮时没办法获取任何keycode和对应的事件,所以这里会有问题。

相关文章
相关标签/搜索