快捷導(dǎo)航

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

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

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

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

截圖如下

（未獲取軟鍵盤焦點(diǎn)的情況）

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

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

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

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

360應(yīng)該是使用后者，其他的也許是使用前者。

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

既然分析完畢就要寫(xiě)代碼了

1.添加識(shí)別瀏覽器代碼

var isSpecialBrowser = navigator.userAgent.match(/360 Aphone.*$([\d.]+)$$/i)//360等部分軟鍵盤采用的是軟鍵盤不占用主窗口空間造成，吸底的 input獲取焦點(diǎn)的時(shí)候被遮罩

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', -);
   }
  });

好了，問(wèn)題解決了

但是會(huì)又問(wèn)題，就是主動(dòng)點(diǎn)擊鍵盤收起按鈕時(shí)沒(méi)辦法獲取任何keycode和對(duì)應(yīng)的事件，因此這里會(huì)有問(wèn)題。

文本框獲得焦點(diǎn)、失去焦點(diǎn)調(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>無(wú)標(biāo)題頁(yè)</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>

您可能感興趣的文章: