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

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

转载作者：qq735679552 更新时间：2022-09-27 22:32:09

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章360浏览器文本框获得焦点后被android软键盘遮罩该怎么办由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

截图如下。

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

（未获取软键盘焦点的情况）。

（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>