可以網頁瞭解android虛擬鍵盤

Question

我有web page with jquery terminal和隱藏的textarea（即觸發Android虛擬鍵盤），我可以鍵入字符，但是當我輸入很少的命令時，內容被隱藏在虛擬鍵盤後面。終端內容滾動到底部，因爲當我輸入更多命令時，它正在滾動。當我在手機中使用硬件密鑰時，滾動是正確的（觸摸滾動還沒有正常工作）。

我加入這個CSS

.terminal textarea { top: 0; width:0; margin-left: -8px; pointer-events: none; } 

到prevoius

.terminal .clipboard { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    opacity: 0.01; 
    filter: alpha(opacity = 0.01); 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.01); 
    width: 2px; 
} 
.cmd > .clipboard { 
    position: fixed; 
} 

，並在插件代碼（用於剪貼板文本區域）。

self.click(function() { 
    self.find('textarea').focus(); 
}); 

而且我qestion是這樣的：JavaScript可以檢測虛擬鍵盤有多大？或者，也許有其他方式來改變網頁的大小，所以它只在視覺部分（不是鍵盤在哪裏）？或者，也許我的代碼有些問題，它不適用於移動設備。 即使用戶安裝不同的鍵盤，鍵盤的尺寸是否始終相同？

Answer 1

從我所看到的情況來看，當虛擬鍵盤彈出時，頁面沒有調整大小（以適應較小的視圖區域，虛擬鍵盤可見）。所以這不會給你的頁面提示鍵盤是否啓動。我真的不覺得有另一種獲得這些信息的方法。

您可以在設置中查看用戶代理，如果是用於Android手機，當用戶單擊各種文本輸入元素時，可在虛擬鍵盤的屏幕底部留出空間。

對於鍵盤的大小，股票Android可能會有一個標準的大小或比例或百分比，但加上事實上有很多的Android MODs外加事實，有多個屏幕分辨率和屏幕那裏的比率轉化爲不能有一個固定的數字爲此（如鍵盤是x像素高或y％的屏幕地產）。但是，您可以根據常識假定底部的屏幕大約需要一半。因此，基本上，使用用戶代理，屏幕分辨率和用戶在文本輸入字段上「點擊」的事實，您可以獲得是否顯示虛擬鍵盤的一個體面的想法，以及多少空間把它放在一邊。

Answer 2

如果您正在尋找保持終端內容的方式，即使在鍵盤彈出時也可以看到，您無需知道鍵盤大小。問題出在你的身高"#shell"。嘗試在Chrome（桌面）上打開開發人員工具並調整窗口大小。您會看到div的高度"#shell"始終適合設備高度，而不是內容區域高度。所以，當鍵盤彈出時，內容將會在鍵盤的後面。要使其工作，您應該強制您的"#shell"高度適合內容區域。我嘗試修改CSS，它在我的android模擬器中正常工作。也從您的頁面中刪除touch-scroll js，這是不必要的。你可以附加這個CSS代碼到你的CSS文件。

#shell { 
    position: fixed !important; 
    top: 0; left: 0; 
    width: 100% !important; height: 100% !important; 
    margin: 0 !important; padding: 0 !important; 
    -webkit-transition: none !important; 
    -webkit-transform: none !important; 
    overflow-y: visible !important; 
} 

#shell .terminal-output, #shell .cmd { 
    margin: 10px; 
} 

希望得到這個幫助。:)

Answer 3

1您可以使用Manifest.xml中的<activity>元素中的android:windowSoftInputMode屬性在IME彈出時在各種調整大小策略中進行選擇。這些包括（不限於）：

adjustResize，它將調整您的Activity的內容視圖（以及其中的WebView）以適應剩餘空間。

adjustPan，這將使內容視圖填滿整個屏幕，部分被IME的窗口遮擋。

玩這些可能已經給你你正在尋找的行爲。

2當Android出現IME彈出窗口時滾動（Web）視圖的默認行爲是它試圖使光標保持可見。在你的情況下，你把你的光標（或：焦點）放在一個隱藏的視圖上。這解釋了你所看到的怪異行爲，我認爲你會很好地改變你的實現。爲什麼你首先不使用可見的textarea？你的文字將不得不在某個地方結束，對吧？然後Android會自動處理焦點/滾動。

作爲一種解決方法：您可以嘗試的方法是定位您的隱藏視圖更加智能並不時清除其內容，從而避免您的滾動問題。當然這個選項的可行性取決於你的確切用例。

3這將是答案，你問這個問題，但我不能確定這將如何幫助你（也許是因爲我與HTML缺乏經驗的）：

要得到的WebView的高度（這是屏幕大小 - 輸入法高度）在您的JavaScript執行以下操作：

• 在您的清單中，將android:windowSoftInputMode="adjustResize"屬性添加到您的元素。

• 這樣的擴展你的外佈局：

  public class RelativeLayoutWithLayoutListener extends RelativeLayout { 
  
  public interface LayoutListener { 
      public void onLayout(); 
  } 
  
  private LayoutListener mListener; 
  
  public RelativeLayoutWithLayoutListener(Context context) { 
      super(context); 
  } 
  
  public RelativeLayoutWithLayoutListener(Context context, AttributeSet attrs, int defStyle) { 
      super(context, attrs, defStyle); 
  } 
  
  public RelativeLayoutWithLayoutListener(Context context, AttributeSet attrs) { 
      super(context, attrs); 
  } 
  
  public void setLayoutListener(LayoutListener aListener) { 
      mListener = aListener; 
  } 
  
  @Override 
  protected void onLayout(boolean changed, int l, int t, int r, int b) { 
      super.onLayout(changed, l, t, r, b); 
      if (mListener != null) { 
       mListener.onLayout(); 
      } 
  } 
  } 
  

• 換掉舊的佈局在layout.xml文件新創建的一個。

• 在你的活動代碼，做這樣的事情：

  public class MainActivity extends Activity { 
  
  private RelativeLayoutWithLayoutListener mMainLayout; 
  
  private WebView mWebView; 
  
  @Override 
  protected void onCreate(Bundle savedInstanceState) { 
      super.onCreate(savedInstanceState); 
      setContentView(R.layout.activity_main); 
      mMainLayout = (RelativeLayoutWithLayoutListener)findViewById(R.id.main_layout); 
  
      mMainLayout.setLayoutListener(new LayoutListener() { 
  
       @Override 
       public void onLayout() { 
        mWebView.loadUrl("javascript:setSize(" + mMainLayout.getWidth() + "," + mMainLayout.getHeight() + ")");    
       } 
      }); 
  
      mWebView = (WebView)findViewById(R.id.webview); 
  } 
  } 
  

當然，在使用loadURL（）呼叫你將不得不打電話給你定義的JavaScript方法。如果你先做一些計算，你當然也可以通過IME的高度。