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

并在插件中使用此代码（textarea用于剪贴板）。

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

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

Answer 1

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

Manifest.xml，它将调整Activity的内容视图（以及其中的WebView）以适应剩余空间。

adjustResize，它会让内容视图填满整个屏幕，被IME的窗口部分遮挡。

使用这些可能已经为您提供了所需的行为。

2当弹出IME时滚动（Web）视图时，Android的默认行为是它试图保持光标可见。在您的情况下，您将光标（或：焦点）放在隐藏的视图上。这解释了您所看到的奇怪行为，我认为您可以更好地改变您的实施。你为什么不首先使用可见的textarea？你的文字必须在某个地方结束，对吧？然后Android将自动处理焦点/滚动。

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

3这将是您要问的问题的答案，但我不确定这对您有何帮助（可能是因为我对html缺乏经验）：

要在javascript中获取WebView的高度（屏幕大小 - IME高度），请执行以下操作：

在您的清单中，将adjustPan属性添加到您的元素中。

扩展您的外部布局，如下所示：

android:windowSoftInputMode="adjustResize"

在layout.xml文件中换掉新创建的布局。

在您的活动代码中，执行以下操作：

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

当然在loadUrl（）调用中，您必须调用您定义的javascript方法。如果先进行一些计算，当然也可以传入IME的高度。

Answer 2

从我所看到的，当弹出虚拟键盘时，页面不会调整大小（以适应较小的视图区域，在虚拟键盘打开时可见）。所以这不会给你的页面提示键盘是否启动。而且我并不认为还有另一种获取信息的方式。

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

对于键盘的尺寸，Android的股票可能有一个标准尺寸或比例或百分比，但结合了有很多Android mods的事实加上有多个屏幕分辨率和屏幕比率的事实那里转换为无法为此设置固定数字（如键盘高x像素或屏幕空间的百分比）。但是，您可以做出一个常识性的假设，即它占据了屏幕底部的大约一半。

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

Answer 3

如果您想要在键盘弹出时保持终端内容可见的方式，则无需知道键盘大小。问题出在"#shell"高度。尝试在Chrome（桌面）上打开开发人员工具并调整窗口大小。您会看到"#shell" div的高度始终适合设备高度，而不是内容区域高度。因此，当键盘弹出时，内容将位于键盘的后面。要使其有效，您应该强制"#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;
}

希望这有帮助。：）

网页可以知道Android虚拟键盘

3 个答案: