网页可以知道Android虚拟键盘

Question

我有带jquery终端的网页和隐藏的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;
}

并在插件中使用此代码(textarea用于剪贴板).

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

我的问题是:javascript可以检测出虚拟键盘的大小吗？或者也许还有其他方法来改变网页的大小,所以它只是在视觉部分(不是键盘的位置)？或者我的代码可能有问题,它不适用于移动设备.即使用户安装了不同的键盘,键盘的大小也始终相同吗？

Answer 1

1您可以在元素中使用android：windowSoftInputMode属性，以<activity>在Manifest.xml弹出IME时在各种调整大小策略中进行选择。这些包括（但不限于）：

adjustResize，它将调整“活动”内容视图（及其中的WebView）的大小，以适应剩余空间。

adjustPan，这将使内容视图充满整个屏幕，部分被IME的窗口遮挡。

玩这些游戏可能已经给了您想要的行为。

2当IME弹出时，滚动（Web）视图时Android的默认行为是尝试保持光标可见。在您的情况下，您要将光标（或焦点）放在隐藏的视图上。这解释了您所看到的奇怪行为，并且我认为您可以很好地更改实现。为什么首先不使用可见的文本区域？您的文字必须以某处结尾，对吗？然后，Android将自动处理焦点/滚动。

解决方法：您可以尝试将隐藏视图更智能地放置，并不时清除其内容，从而避免滚动问题。当然，此选项的可行性取决于您的确切用例。

3这将是您所提问题的答案，但是我不确定这将对您有什么帮助（可能是由于我对html的经验不足）：

要在您的JavaScript中获取WebView的高度（即屏幕尺寸-IME高度），请执行以下操作：

• 在清单中，将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的高度。

Answer 2

据我所见，当虚拟键盘弹出时，页面大小不会调整（以适应较小的视图区域，在虚拟键盘打开时可见）。所以这不会给你的页面提示键盘是否打开。我也不认为还有其他方法可以获取这些信息。

您可以在查看用户代理的位置进行设置，如果是 Android 手机，当用户单击各种文本输入元素时，您可以在屏幕底部为虚拟键盘留出一些空间。

对于键盘的尺寸，原生 Android 可能有一个标准尺寸、比例或百分比，但考虑到有很多 Android 模组，再加上有多种屏幕分辨率和屏幕比例，这就意味着键盘的尺寸是固定的。无法为此提供固定的数字（例如键盘的高度为 x 像素或屏幕空间的 y 百分比）。但是，您可以做出一个常识性的假设，即底部大约占据屏幕的一半。

所以基本上，使用用户代理、屏幕分辨率以及用户“单击”文本输入字段的事实，您可以很好地了解虚拟键盘是否显示，以及留出多少空间它。