Can webpage be aware of android virtual keyboard

Question

I have web page with jquery terminal and hidden textarea (that trigger Android Virtual keyboard), I can type characters but when I enter few commands the content is hidden behind Virtual Keyboard. Terminal content is scrolling to bottom because when I type some more command it's scrolling. When I use hardware keybaord in my phone scrolling is right (touch scroll is not working yet).

I added this CSS

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

to 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;
}

and have this code in plugin (textarea was used for clipboard).

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

And my qestion is this: can javascript detect how big Virtual Keyboard is? Or maybe there is other way to change the size of the webpage so it's be only in visual part (not where keyboard is)? Or maybe something is wrong with my code, it was not designed to work on mobile. Does the size of the keyboard is always the same, even if user install different one?

Answer 1

1 You can use android:windowSoftInputMode attribute within the <activity> element in your Manifest.xml to select amongst various resizing strategies when the IME pops up. These include (not limited to):

adjustResize, which will resize your Activity's content view (and the WebView in it) to fit the remaining space.

adjustPan, which will leave the content view to fill the entire screen, partially occluded by the IME's Window.

Playing with these may already give you the behavior you are looking for.

2 Android's default behavior when it comes to scrolling a (Web)View when the IME pops up is that it tries to keep the cursor visible. In your case you are putting your cursor (or: focus) on a hidden view. This explains the weird behavior you are seeing and I think you would do well to change your implementation. Why are you not using a visible textarea in the first place? Your text will have to end up somewhere, right? And then Android will handle the focus/scroll automatically.

As a workaround: something you could try is to position your hidden view smarter and clear its contents from time to time, thereby dodging your scrolling issue. Of course the viability of this option depends on your exact use case.

3 This will be the answer to the question you are asking, but I am unsure how this will help you (maybe because of my inexperience with html):

To get the height of the WebView (which is Screen size - IME height) in your javascript do the following:

• In your manifest, add the android:windowSoftInputMode="adjustResize" attribute to your element.

• extend your outer layout like this:

  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();
      }
  }
  }
  

• Swap out your old layout for the newly created one in your layout.xml file.

• In your Activity code, do something like this:

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

Of course in the loadUrl() call you will have to call a javascript method you defined. You can of course also pass in the height of the IME if you do some calculations first.

Answer 2

From what I've seen, when the virtual keyboard pops up, the page is not resized (to fit the smaller view-area, visible with the virtual keyboard on). So this will not give your page a hint on whether the keyboard is up or not. And I don't really think there's another way of getting that info either.

You can make a setup where you look at the user agent, and if it's for an Android phone, when the user clicks various text input elements, you make some room at the bottom of the screen for the virtual keyboard.

For the size of the keyboard, the stock Android might have a standard size or ratio or percentage, but combined with the fact that there are a lot of Android mods out there plus the fact that there are multiple screen resolutions and screen ratios out there translates into not being able to have a fixed number for this (like keyboard is x pixels tall or y percent of screen estate). However, you can make a common sense assumption that it takes about half of the screen at the bottom.

So basically, using the user agent, screen resolution and the fact that the user has "clicked" on a text input field, you can get a decent idea of whether a virtual keyboard is displayed or not, and how much room to leave aside for it.