9

jquery ターミナルと非表示のテキストエリア (Android 仮想キーボードをトリガーする)を含む Web ページがあります。文字を入力できますが、いくつかのコマンドを入力すると、コンテンツが仮想キーボードの背後に隠されます。さらにコマンドを入力するとスクロールするため、端末のコンテンツが下にスクロールします。携帯電話でハードウェア キーボードを使用すると、スクロールは正しく行われます (タッチ スクロールはまだ機能していません)。

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

このコードをプラグインに入れます(テキストエリアはクリップボードに使用されました)。

 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 IME がポップアップしたときに (Web)View をスクロールするときの 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 の高さを渡すこともできます。

于 2013-03-13T15:45:54.683 に答える
2

私が見たところ、仮想キーボードがポップアップしても、ページのサイズは変更されません (仮想キーボードがオンの状態で表示される小さなビュー領域に合わせて)。したがって、これは、キーボードがオンになっているかどうかについてのヒントをページに提供しません。また、その情報を取得する別の方法もあるとは思いません。

ユーザー エージェントを確認するセットアップを作成できます。Android フォンの場合、ユーザーがさまざまなテキスト入力要素をクリックすると、画面の下部に仮想キーボード用のスペースができます。

キーボードのサイズについては、標準の Android には標準のサイズ、比率、またはパーセンテージがある可能性がありますが、多くの Android MOD が存在するという事実に加えて、複数の画面解像度と画面比率が存在するという事実を組み合わせると、これには固定数を設定できません (キーボードの高さが 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 に答える