360瀏覽器文本框獲得焦點后被android軟鍵盤遮罩該怎么辦

更新時間：2015年12月18日 10:41:07 作者：jerrylsxu

最近接了個項目，項目需求是這樣的，站點上篩選按鈕點擊后彈出層（fixed），當輸入框獲取焦點以后彈出系統(tǒng)自帶的軟鍵盤，在android上十款瀏覽器挨個測試比對，發(fā)現(xiàn)在360瀏覽器彈出鍵盤以后獲取焦點的文本框被軟鍵盤覆蓋了，下面分享我的解決辦法

場景是這樣的，站點上篩選按鈕點擊后彈出層（fixed），當輸入框獲取焦點以后彈出系統(tǒng)自帶的軟鍵盤，在android上十款瀏覽器挨個測試比對，發(fā)現(xiàn)在360瀏覽器彈出鍵盤以后獲取焦點的文本框被軟鍵盤覆蓋了。

截圖如下

（未獲取軟鍵盤焦點的情況）

（chrome瀏覽器調(diào)起軟鍵盤的情況）

（360瀏覽器調(diào)起軟鍵盤情況）

那么問題來了，瀏覽器的軟鍵盤顯示出來又哪幾種情況呢？英文中文（網(wǎng)上找的）

經(jīng)過簡單的了解，大概分析了一下軟鍵盤在瀏覽器上彈出應該包含軟鍵盤占用主activity空間，讓主activity重新布局和不調(diào)整窗口大小浮在上面這兩種方式（哈哈這是我yy的）

360應該是使用后者，其他的也許是使用前者。

既然問題出現(xiàn)了，那就要想辦法解決，于是經(jīng)過簡單的推敲，基本上可以得出（存在不占用主窗口空間的軟鍵盤技術） 1、當input獲取焦點的時候，2、軟鍵盤會彈出，3、fixed的層需要向上移動一下，4、成功輸入；5、當input blur或是鍵盤點擊回車以后,fixed還原位置（這里要慶幸360沒有默認帶旋轉(zhuǎn)屏幕跟隨轉(zhuǎn)動，不然還要麻煩一點）

既然分析完畢就要寫代碼了

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和對應的事件，因此這里會有問題。

文本框獲得焦點、失去焦點調(diào)用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>

您可能感興趣的文章: