android - 网页可以知道android虚拟键盘吗

Question

我有web page with jquery terminal和隐藏的文本区域(触发 Android 虚拟键盘)，我可以键入字符，但是当我输入几个命令时，内容隐藏在虚拟键盘后面。终端内容滚动到底部，因为当我键入更多命令时它正在滚动。当我在手机中使用硬件键盘时，滚动是正确的(触摸滚动尚未工作)。

我添加了这个 CSS

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

往前

.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 ，这将调整 Activity 的内容 View (以及其中的 WebView)的大小以适应剩余空间。

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

玩这些可能已经给了你正在寻找的行为。

2 在 IME 弹出时滚动 (Web)View 时，Android 的默认行为是它会尝试保持光标可见。在您的情况下，您将光标(或:焦点)放在隐藏 View 上。这解释了你所看到的奇怪行为，我认为你最好改变你的实现。你为什么不首先使用可见的文本区域？您的文本必须在某个地方结束，对吗？然后 Android 将自动处理焦点/滚动。

作为解决方法:您可以尝试更智能地定位隐藏 View 并不时清除其内容，从而避免滚动问题。当然，此选项的可行性取决于您的具体用例。

3 这将是您所问问题的答案，但我不确定这对您有何帮助(可能是因为我对 html 缺乏经验):

要在您的 javascript 中获取 WebView 的高度(即屏幕尺寸 - IME 高度)，请执行以下操作:

• 在您的 list 中，添加 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 文件中用新创建的布局替换旧布局。

• 在您的 Activity 代码中，执行如下操作:

  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 的高度。