9

我有带有 jquery 终端和隐藏文本区域(触发 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 可以检测到虚拟键盘有多大吗?或者也许还有其他方法可以改变网页的大小,所以它只是在视觉部分(而不是键盘所在的位置)?或者我的代码可能有问题,它不是为在移动设备上工作而设计的。即使用户安装不同的键盘,键盘的大小是否始终相同?

4

3 回答 3

5

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

adjustResize,这将调整您的 Activity 的内容视图(以及其中的 WebView)以适应剩余空间。

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

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

2 Android 在 IME 弹出时滚动 (Web)View 的默认行为是它试图保持光标可见。在您的情况下,您将光标(或:焦点)放在隐藏视图上。这解释了你看到的奇怪行为,我认为你最好改变你的实现。你为什么不首先使用可见的文本区域?您的文本必须在某个地方结束,对吗?然后 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 的高度。

于 2013-03-13T15:45:54.683 回答
2

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

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

对于键盘的尺寸,普通的 Android 可能有一个标准的尺寸或比例或百分比,但结合有很多 Android 模块的事实,加上有多种屏幕分辨率和屏幕比例的事实翻译无法为此设置固定数字(例如键盘高 x 像素或屏幕空间的 y%)。但是,您可以做出一个常识性的假设,即底部大约占屏幕的一半。

所以基本上,使用用户代理、屏幕分辨率和用户“点击”文本输入字段这一事实,您可以大致了解是否显示虚拟键盘,以及留出多少空间它。

于 2013-03-08T08:51:52.057 回答
0

如果您正在寻找即使在键盘弹出时也能保持终端内容可见的方法,则无需知道键盘大小。问题在于你的"#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;
}

希望这有帮助。:)

于 2013-03-12T15:01:08.293 回答